Angular Material带边框图标按钮缺失及图标居中问题咨询

问题背景 #

我用这段代码实现带图标的描边按钮：

<button mat-stroked-button>
    <mat-icon>check_circle</mat-icon>
</button>

但图标无法居中。我知道可以自定义类调整边距，但担心Material升级后样式冲突，不想每次升级都修改代码。查文档发现：

• mat-icon-button 没有边框
• mat-mini-fab 外观和描边按钮差别太大
• mat-icon-button 和 mat-stroked-button 不能组合使用

翻了Material V2和V3的规范，都没找到带边框的纯图标按钮，想问两个问题：

1. 是不是必须自己实现这个组件？
2. 这个组合是官方故意不做，还是疏漏？

解答 #

1. 没错，目前官方组件库确实没有这种现成的组件。如果不想用容易受版本升级影响的全局自定义样式，最稳妥的方式是自己封装一个组件。可以基于mat-stroked-button来封装，在组件内部用专属样式调整图标居中，这种封装后的组件样式和全局样式隔离，只要官方基础组件的核心API不变，升级时基本不用改动。

2. 这是官方故意的设计决策，不是疏漏。不管是V2还是V3的Material规范，图标按钮的定义就是无边框的极简样式，而描边按钮的设计初衷是用来承载文本，图标只是作为文本的辅助元素。官方为了保持设计体系的一致性，没有把这两种按钮的特性合并，所以没有提供带边框的纯图标按钮。

内容的提问来源于stack exchange，提问作者LeO