bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items
- 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
Adding an IconButton with `matListItemMeta` directive into the multine list item causes incorrect rendering of the hover shadow (see the screeshot attached)
```
Incorrect Trailing Icon 1
Second line
Third line
info
```
### Reproduction
StackBlitz link: https://stackblitz.com/edit/hexovpvm?file=src%2Fexample%2Flist-variants-example.html,src%2Fexample%2Flist-variants-example.ts&startScript=start
Steps to reproduce:
1. Hover over the IconButton next to the first two list items. Notice, that the icon isn't centered
2. Hover over the IconButton next to the last list item. Notice, that in case of one-line list items the icon is rendered correctly
### Expected Behavior
The icon should always be centered inside hover shadow
### Actual Behavior
The icon isn't centered inside hover shadow
### Environment
- Angular: 20.2.8
- CDK/Material: 20
- Browser(s): chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and compare the MatList, matListItemMeta, and matIconButton styles for multiline versus one-line items. Trace the hover-shadow layout for the trailing IconButton, then verify that the icon is centered for both cases in Chrome and that the reported reproduction no longer occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100