如何调整含SVG mat-icon的mat-button大小？PrimeNg按钮尺寸匹配问题

首先说结论：推荐你改用mat-icon-button替代当前的mat-mini-fab，因为前者是专门为图标场景设计的按钮，样式更灵活，没有mat-mini-fab自带的圆形固定布局限制，更容易和PrimeNg的pButton对齐尺寸。

下面给你具体的修改方案和原因分析：

方案1：切换到mat-icon-button（优先推荐） #

mat-icon-button默认就是适配图标的轻量按钮，你可以轻松自定义背景色、尺寸和圆角，完美匹配pButton的风格。

修改后的HTML代码：

<button mat-icon-button class="identify_icon" (click)="zebraIdentify()">
  <mat-icon svgIcon="identify_icon"></mat-icon>
</button>
<button mat-icon-button class="start_icon" (click)="zebraStartReads()">
  <mat-icon svgIcon="start_icon"></mat-icon>
</button>
<button mat-icon-button class="stop_icon" (click)="zebraStopReads()">
  <mat-icon svgIcon="stop_icon"></mat-icon>
</button>

对应的CSS（无需::ng-deep，直接在组件样式中编写即可，避免样式穿透的副作用）：

.mat-icon-button {
  /* 设置和你的pButton完全一致的尺寸 */
  height: 40px;
  width: 40px;
  border-radius: 9px;
  box-shadow: none;
  margin: 0 5px;
}

/* 自定义按钮背景色 */
.identify_icon {
  background-color: #59BFC9;
}
.start_icon {
  background-color: #A2CB75;
}
.stop_icon {
  background-color: #E01515;
}

/* 调整图标大小，让它刚好适配按钮 */
.mat-icon-button .mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

方案2：如果必须保留mat-mini-fab，修复样式失效问题 #

你之前的样式不生效主要有两个原因：

1. 错误设置了height:3px（这显然是笔误，应该设为和pButton一致的高度，比如40px），且用padding-bottom调整尺寸是错误思路——按钮尺寸要用height和width控制，padding是内部间距。
2. mat-mini-fab内部有一个.mat-button-wrapper容器，默认带有padding，会影响图标布局。

调整后的CSS：

::ng-deep .mat-mini-fab {
  height: 40px !important;
  width: 40px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  margin: 0 5px;
}

/* 去掉内部容器的默认padding，让图标居中 */
::ng-deep .mat-mini-fab .mat-button-wrapper {
  padding: 0 !important;
}

/* 适配图标大小 */
::ng-deep .mat-mini-fab .mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.identify_icon {
  background-color: #59BFC9;
}
.start_icon {
  background-color: #A2CB75;
}
.stop_icon {
  background-color: #E01515;
}

额外提示 #

尽量避免过度使用::ng-deep和!important，它们会破坏组件样式的封装性。mat-icon-button在样式自定义上更友好，是这类图标按钮场景的最佳选择。

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