angular / angular/components

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

オープン
#31,628 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: material/chips docs P2
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Documentation Feedback

The [documentation for MatChip](https://material.angular.dev/components/chips/overview#adding-up-to-two-icons-with-content-projection) 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 \, \, and \.

This suggests two possible slots for a `` (leading or trailing the chip text). However, this doesn't work in practice, and looking at the [template code](https://github.com/angular/components/blob/main/src/material/chips/chip.html) 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](https://m3.material.io/components/chips/overview)). However, as it stands the documentation is misleading as to the current behaviour.

Image
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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

影響を受ける MatChip のドキュメントセクションから始め、その記載内容を src/material/chips/chip.html と比較します。リンクされた StackBlitz の例を使って、報告された動作を matChipAvatar のケースも含めて再現します。ドキュメントがサポートされている先頭スロットの動作を正確に反映し、その例がユーザーを誤解させなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
documentation, frontend
issue の種類
ドキュメント
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。