bug(MatListItem): Misalignment of Button Icon in Two-Line MatListItem
zerbusdetroy opened this issue · comments
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
16
Description
When using a Button Icon as matListItemMeta
in a two-line MatListItem
, the icon is not properly centered within the button. This misalignment appears to be caused by the display: inline-block;
property in the .mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end::before
selector.
Reproduction
StackBlitz link: https://stackblitz.com/edit/jytzjx?file=src%2Fexample%2Flist-overview-example.html
Expected Behavior
The Button Icon should be vertically and horizontally centered within the button in a two-line MatListItem
.
Actual Behavior
The Button Icon is not centered within the button, leading to a misalignment in the UI.
Environment
- Angular: 17.3.9
- CDK/Material: 17.3.9
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
matListItemMeta
is meant to be used as a container. Something like this should work:
<div matListItemMeta>
<button mat-icon-button>
<mat-icon fontIcon="home"></mat-icon>
</button>
</div>