angular / angular/components

bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items

Abierto
#32,067 5 comentarios 4 reacciones 0 asignados Ver en GitHub
area: material/list docs P3
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)

Image

```


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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.