docs-bug(chips): MatChip does not natively support leading icon despite docs

[benelliott]

Documentation Feedback

The documentation for MatChip states the following:

You can add two additional icons to an individual chip. A chip has two slots to display icons using content projection. All variants of chips support adding icons including <mat-chip>, <mat-chip-option>, and <mat-chip-row>.

This suggests two possible slots for a <mat-icon> (leading or trailing the chip text). However, this doesn't work in practice, and looking at the template code suggests that the chip only supports an avatar in the leading slot (despite the documentation stating "icon").

When you try to add an icon rather than an avatar, it's not aligned correctly. Adding the matChipAvatar directive doesn't help as the icon is clipped to a circle (and the alignment is still off).

In my opinion, a chip should support projecting an instance of MatIcon on the leading side (in fact, it's show in the MD spec). However, as it stands the documentation is misleading as to the current behaviour.

https://stackblitz.com/edit/gqzwx38r?file=src%2Fexample%2Fchips-avatar-example.html

Affected documentation page

https://material.angular.dev/components/chips/overview#adding-up-to-two-icons-with-content-projection

[wagnermaciel]

I believe the correct way to do this is using matChipAvatar as you did in your second example. Could you give a more detailed description of what you mean by

Adding the matChipAvatar directive doesn't help as the icon is clipped to a circle (and the alignment is still off).

Here's a stackblitz where all the chips are using the matChipAvatar approach:

https://stackblitz.com/edit/yrkhprxm?file=src%2Fexample%2Fchips-avatar-example.ts,src%2Fexample%2Fchips-avatar-example.html

[benelliott]

Hi @wagnermaciel, if I click your Stackblitz, the icons have a 24px border radius applied to them which clips the icon corners (presumably assuming an avatar is going to be a circular photograph). It's more visible with some icons than others. Here is a screenshot:

It's actually visible with the event icon (the final chip above), which can be seen (unclipped) in the Material Design spec:

The icons also seem to have uneven horizonal spacing (4px, 8px) in Angular Material:

Whereas they are equal on the MD spec (8px, 8px):

Note the 4px, 8px padding is specified for chip avatars in the spec but not for leading icons:

In other words, the Material spec provides a different specification for icons as opposed to avatars but the Angular Material library conflates them.

[wagnermaciel]

Ah gotcha. Yeah, seems like a legitimate issue. Thank you for expanding!