bug(list): MatIcon not displayed with matListItemMeta tag

[RobinBomkamp]

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

14.2.0

Description

After the material migration to the mdc-based components MatIcons are not displayed correctly in the meta section of a list item.

Reproduction

Steps to reproduce:

1. Build a simple page with a MatList and a MatListItem.
2. Add an icon to the meta section.
3. Icon will display only the selector as text.

https://stackblitz.com/edit/components-issue-mmrxed?file=src%2Fapp%2Fexample-component.html

Code example:
<mat-list> <mat-list-item> This shows no icon in the meta section -> <mat-icon matListItemMeta>edit</mat-icon> </mat-list-item> </mat-list>

Expected Behavior

The icon has to be displayed.

Actual Behavior

The icon name is shown.

Environment

Angular CLI: 15.0.4
Node: 18.12.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1500.4
@angular-devkit/build-angular 15.0.4
@angular-devkit/core 15.0.4
@angular-devkit/schematics 15.0.4
@angular/cdk 15.0.3
@angular/material 15.0.3
@schematics/angular 15.0.4
ng-packagr 15.0.3
rxjs 7.5.7
typescript 4.8.4

[devversion]

The problem is that matListItemEnd has a specific font-family assigned from MDC. This overrides the ligature font. A workaround would be to use:

 <div matListItemMeta>
  <mat-icon>edit</mat-icon>
</div>

[RobinBomkamp]

The problem is that matListItemEnd has a specific font-family assigned from MDC. This overrides the ligature font. A workaround would be to use:

 <div matListItemMeta>
  <mat-icon>edit</mat-icon>
</div>

Thank you, @devversion. Your workaround is working. Maybe providing an example for MatListItemMeta in the official docs would help. :)

[michaelfaith]

@crisbeto would you like the fix for this to be the docs update to share the example (workaround)? Or would it be to address the font-family being applied to matListItemEnd?

[galanggg]

Hi @crisbeto, I want to help with this issue. I have a question. Shall we add an example based on this issue? Or just add an annotation description regarding the function of matListItemEnd into the table-style directive list item?