angular / angular/components

feat(button): add filled/tonal matIconButton

未关闭
#33,091 0 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看
area: material/button feature gemini-triaged P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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 摘要。