Angular Material图标是否有类似Font Awesome的尺寸调整指令？

嘿，这个问题问得很实用！Angular Material确实没有像Font Awesome那样直接提供lg/sm/md这类一键式的尺寸指令，但有几种简单又灵活的方式来调整图标大小，我给你详细说说：

1. 使用组件内置的fontSize输入属性 #

这是最直接的方法，mat-icon组件本身就支持fontSize输入属性，你可以传入预设的尺寸关键词或者自定义的像素值：

• 预设值：small（对应18px）、medium（默认24px）、large（对应32px）
• 自定义像素值：直接写"32px"、"48px"这类具体数值

示例代码：

<!-- 预设小尺寸 -->
<mat-icon fontSize="small">subdirectory_arrow_right</mat-icon>
<!-- 预设大尺寸 -->
<mat-icon fontSize="large">subdirectory_arrow_right</mat-icon>
<!-- 自定义36px尺寸 -->
<mat-icon fontSize="36px">subdirectory_arrow_right</mat-icon>

2. 自定义CSS类实现复用样式 #

如果你的项目里需要重复使用某些特定尺寸的图标，自定义CSS类会更方便。只需要给mat-icon设置font-size、width和height（这三个属性配合能确保图标显示稳定）：

首先在样式文件里定义类：

.icon-xs {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.icon-xl {
  font-size: 48px;
  width: 48px;
  height: 48px;
}

然后在模板中使用：

<mat-icon class="icon-xs">subdirectory_arrow_right</mat-icon>
<mat-icon class="icon-xl">subdirectory_arrow_right</mat-icon>

3. 动态绑定尺寸（适合需要交互调整的场景） #

如果需要根据组件逻辑动态改变图标大小，可以用Angular的样式绑定语法：

模板代码：

<!-- 根据组件内的变量动态设置尺寸 -->
<mat-icon [style.fontSize.px]="customIconSize">subdirectory_arrow_right</mat-icon>

组件类里定义变量：

customIconSize = 32; // 可以根据业务逻辑修改这个值

这样就能轻松实现图标尺寸的动态调整啦！

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