bug(MatList): Icons do not respect RTL direction
- 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
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