Angular Material中如何实现适配的方形仅图标凸起按钮？

不用更换框架，Angular Material完全可以实现需求，以下是两种实用方案：

方案一：改造mat-raised-button适配仅图标场景 #

mat-raised-button的宽度过宽是因为默认设置了最小宽度和内边距，通过自定义样式就能修正：

1. 给按钮添加自定义类，比如square-icon-raised-btn
2. 编写CSS覆盖默认样式：

.square-icon-raised-btn {
  min-width: 44px; /* 按需调整为目标方形尺寸，建议符合触摸交互最小尺寸 */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 模板中使用：

<button mat-raised-button color="primary" class="square-icon-raised-btn">
  <mat-icon>edit</mat-icon>
</button>

这种方式能完整保留mat-raised-button的凸起阴影、主色背景，和其他同类型按钮风格完全统一。

方案二：调整mat-icon-button为方形凸起样式 #

如果想基于mat-icon-button的图标适配逻辑改造，只需修改形状和背景：

1. 添加自定义类square-raised-icon-btn
2. 编写样式匹配mat-raised-button的视觉特征：

.square-raised-icon-btn {
  border-radius: 4px; /* 和mat-raised-button默认圆角保持一致 */
  background-color: var(--mdc-theme-primary); /* 继承主题主色 */
  color: #fff;
  box-shadow: var(--mdc-elevation-level-2); /* 匹配原生凸起按钮阴影 */
}
.square-raised-icon-btn:hover {
  background-color: var(--mdc-theme-primary-dark); /* hover时的深色主色，和原生按钮行为一致 */
  box-shadow: var(--mdc-elevation-level-4);
}

3. 模板中使用：

<button mat-icon-button class="square-raised-icon-btn">
  <mat-icon>delete</mat-icon>
</button>

额外提示 #

• 尺寸数值可根据你的设计规范调整，比如用48px更贴合Material Design的触摸目标要求
• 样式中使用的CSS变量都是Angular Material内置的，无需硬写具体颜色值，能保持主题一致性

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