angular / angular/components

feat(button): add filled/tonal matIconButton

Aperta
#33,091 0 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: material/button feature gemini-triaged P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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."

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia confrontando le opzioni di aspetto esistenti di matButton con matIconButton, quindi esamina le varianti dei pulsanti icona di Material Design 3 collegate nell’issue. Il lavoro è completato quando matIconButton può eseguire il rendering di aspetti filled e tonal come pulsanti icona circolari, distinti dai FABs e dai pulsanti icona standard.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Specificata chiaramente
Idoneità per principianti
52/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.