Material 15中带图标与文字的mat-button对齐问题求助

针对你遇到的按钮图标和文字垂直不对齐的问题，可通过以下几种方法解决：

方法一：调整图标的垂直对齐样式 #

直接给<mat-icon>添加内联样式，或者在全局样式中统一设置：

<button mat-button>
  <mat-icon style="vertical-align: middle; margin-right: 8px;">keyboard_arrow_left</mat-icon>
  Back To Home
</button>

如果需要让所有同类型按钮都生效，在项目全局样式文件（如styles.scss）中添加：

.mat-button mat-icon {
  vertical-align: middle;
  margin-right: 8px; /* 可选，增加图标与文字的间距 */
}

方法二：利用Flex布局强制对齐 #

Material按钮本身支持Flex布局，显式设置对齐方式可确保图标和文字居中对齐：

<button mat-button style="display: flex; align-items: center; gap: 8px;">
  <mat-icon>keyboard_arrow_left</mat-icon>
  Back To Home
</button>

gap: 8px用来控制图标和文字的间距，比margin更适配Flex布局的场景。

问题根源：Material 15中<mat-icon>默认的垂直对齐属性与按钮内文字的基线不一致，通过调整垂直对齐或Flex布局的对齐规则，就能让两者居中对齐。

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