bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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
Guía de contribución
Línea de trabajo
Comienza con la reproducción vinculada de StackBlitz y compara los estilos de MatList, matListItemMeta y matIconButton para elementos multilínea y de una sola línea. Sigue el diseño de hover-shadow para el IconButton final y verifica después en Chrome que el icono esté centrado en ambos casos y que la reproducción indicada ya no se produzca.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- design, frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100