如何给mat-icon-button添加图标并保持40px高度与无图标按钮一致

数据老陈

2026-8-28

问题场景

开发需求：在<button>标签内嵌入mat-icon图标，要求按钮保持40px固定高度，与同页面右侧无图标按钮高度完全一致
异常现象：添加mat-icon后按钮高度会自动增加数像素，出现高度不对齐问题
已尝试操作：缩小图标尺寸，未产生任何修复效果
约束条件：不得改动右侧已符合高度要求的无图标按钮样式，仅修正左侧带图标按钮的高度，且需保留图标元素

参考截图

带图标与无图标按钮效果对比
缩小图标尺寸的无效调整效果
业务代码截图

解决方案

问题根源

Angular Material的mat-icon组件默认带有内置行高、上下外边距，且默认以inline基线方式对齐，和按钮内文本的基线错位时，会撑高父级按钮的内容盒高度，仅修改图标尺寸无法消除基线偏移和默认边距带来的额外占位。

具体修复步骤

仅给左侧需要修正的带图标按钮添加专属自定义类，例如btn-icon-left，避免样式污染其他正常按钮
为该类按钮添加以下基础样式，锁定高度并修正内部对齐：

.btn-icon-left {
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 按需调整图标和文字的间距，替代手动给图标加的横向margin */
}

重置该按钮内部mat-icon的默认样式，消除额外高度占位：

.btn-icon-left mat-icon {
  font-size: 18px; /* 适配40px高度按钮的合理图标尺寸 */
  line-height: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
}