-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(button): add filled/tonal matIconButton #33091
Copy link
Copy link
Open
Labels
area: material/buttonfeatureLabel used to distinguish feature request from other issuesLabel used to distinguish feature request from other issuesgemini-triagedLabel noting that an issue has been triaged by geminiLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the teamThis issue needs to be triaged by the team
Metadata
Metadata
Assignees
Labels
area: material/buttonfeatureLabel used to distinguish feature request from other issuesLabel used to distinguish feature request from other issuesgemini-triagedLabel noting that an issue has been triaged by geminiLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the teamThis issue needs to be triaged by the team
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 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."