angular / angular/components

bug(MatList): Icons do not respect RTL direction

Open
#30,537 4 comments 0 reactions 0 assignees View on GitHub
area: material/list i18n P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the MatList icon-spacing problem in an Angular 18 project using Angular Material 19.1.5, with dir="rtl" and the latest Chrome. Compare the icon margins and alignment in RTL and LTR; the issue is done when the icon spacing correctly follows the text direction.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, internationalization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.