bug(MatListItem): Misalignment of Button Icon in Two-Line MatListItem

[zerbusdetroy]

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

[crisbeto]

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>