Skip to content

bug(MatList): Icons do not respect RTL direction #30537

Open
@withpouriya

Description

@withpouriya

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using MatList in an RTL project, the icons do not adjust their margins correctly based on the text direction (dir="rtl"). The left and right margins remain the same as in LTR mode, causing misalignment in RTL layouts.

I was able to fix this issue easily with custom CSS, but I wanted to report it as a bug in case it needs to be addressed in the library.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Icons should switch their margins correctly when dir="rtl" is set.

Actual Behavior

Icons remain aligned as if the project is LTR, leading to incorrect spacing.

Environment

Angular: 18
Angular Material: 19.1.5
Browser: Latest version of Chrome
Operating System: Windows (running a Linux dev container on WSL)

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: material/listneeds: clarificationThe issue does not contain enough information for the team to determine if it is a real bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions