angular / angular/components

feat(button): add filled/tonal matIconButton

オープン
#33,091 コメント 0 件 リアクション 5 件 担当者 0 名 GitHub で見る
area: material/button feature gemini-triaged P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Feature Description

Currently, matButton supports multiple appearances (text, filled, tonal, outlined, elevated) via the matButton attribute, but matIconButton does not accept any appearance input — it always renders as a transparent circular button.

Material Design 3 specifies [filled and tonal icon button variants](https://m3.material.io/components/icon-buttons/overview) as distinct components alongside the standard and outlined icon buttons. There is currently no straightforward way to create these in Angular Material without using matFab/matMiniFab (which have different sizing, elevation, and semantics) or matButton="filled" with an icon (which doesn't produce a circular icon button).

### Use Case

Developers building M3-compliant UIs need filled and tonal icon buttons for actions that require more visual emphasis than a standard icon button, but don't carry the semantic meaning of a FAB (floating action button). For example, a filled icon button for a primary action like "play" or "add to cart" in a toolbar, or a tonal icon button for a medium-emphasis toggle like "bookmark" or "favorite."

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

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

調査の方向性

まず、既存の matButton の外観オプションと matIconButton を比較し、次に issue にリンクされている Material Design 3 のアイコンボタンのバリエーションを確認します。完了条件は、matIconButton が filled と tonal の外観を、FABs や標準のアイコンボタンとは異なる円形のアイコンボタンとしてレンダリングできることです。

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

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
52/100

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

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