Angular 5：通过组件选择器设CSS值并动态调整mat-icon样式

嘿，刚学Angular的话，这个需求其实用CSS变量（自定义属性）配合Angular的样式绑定就能优雅解决，比硬写一堆ngStyle清爽多了！刚好你的例子（36px图标对应72px边框容器、38px圆角）也能完美用这个思路实现，一步步来：

核心思路 #

我们把图标大小、边框容器尺寸这些需要动态变化的值用CSS变量定义，然后让边框的圆角、容器尺寸自动基于这些变量计算——这样只需要修改一个变量，所有关联样式都会自动更新，不用重复写一堆计算逻辑。

步骤1：在组件CSS里定义样式规则 #

把图标和边框的样式逻辑集中写在CSS里，完全贴合你的需求：

/* 给带边框的图标定义专属类 */
.icon-with-border {
  /* 定义两个核心变量：图标字号、边框容器尺寸（默认值用你的例子） */
  --icon-font-size: 36px;
  --border-container-size: 72px;
  
  /* 图标本身的字号 */
  font-size: var(--icon-font-size);
  /* 边框容器的宽高 */
  width: var(--border-container-size);
  height: var(--border-container-size);
  /* 2px的圆形边框，颜色可以自己改 */
  border: 2px solid #2196F3;
  /* 圆角 = 容器半径 + 边框宽度（72/2 + 2 = 38，刚好匹配你的需求） */
  border-radius: calc(var(--border-container-size)/2 + 2px);
  /* 让图标在边框容器里完美居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

如果边框容器尺寸是图标大小的固定倍数（比如72=36×2），还可以简化成只定义图标大小，容器尺寸自动计算：

.icon-with-border {
  --icon-font-size: 36px;
  /* 容器尺寸 = 图标大小 × 2 */
  --border-container-size: calc(var(--icon-font-size)*2);
  
  /* 后面样式不变 */
}

步骤2：在模板里动态绑定变量 #

现在只需要在mat-icon上绑定CSS变量就行，两种场景都能轻松处理：

场景1：固定尺寸的图标 #

直接在模板里写死变量值：

<!-- 完全匹配你的例子：36px图标，72px边框容器，38px圆角 -->
<mat-icon class="icon-with-border" 
  [style.--icon-font-size]="'36px'"
  [style.--border-container-size]="'72px'"
>home</mat-icon>

如果用了倍数简化的CSS，只需要绑定图标大小：

<mat-icon class="icon-with-border" [style.--icon-font-size]="'36px'">home</mat-icon>

场景2：从组件变量动态获取尺寸 #

在组件的.ts文件里定义变量：

// 比如用户选择的图标大小
selectedIconSize = '48px';
// 如果用倍数逻辑，容器尺寸会自动变成96px，圆角是96/2+2=50px

然后模板里绑定：

<mat-icon class="icon-with-border" [style.--icon-font-size]="selectedIconSize">favorite</mat-icon>

备选方案：用ngStyle（不推荐） #

如果一定要用ngStyle，也可以把所有计算写在模板里，但这样样式逻辑分散在模板中，维护起来很麻烦：

<mat-icon
  [ngStyle]="{
    'font-size': selectedIconSize,
    'width': `calc(${selectedIconSize}*2)`,
    'height': `calc(${selectedIconSize}*2)`,
    'border': '2px solid #2196F3',
    'border-radius': `calc(${selectedIconSize} + 2px)`, /* 因为selectedIconSize*2/2 = selectedIconSize，加2就是圆角值 */
    'display': 'inline-flex',
    'align-items': 'center',
    'justify-content': 'center'
  }"
>settings</mat-icon>

小技巧 #

如果需要动态修改边框颜色，也可以加个CSS变量：

.icon-with-border {
  --icon-font-size: 36px;
  --border-container-size: calc(var(--icon-font-size)*2);
  --border-color: #2196F3; /* 新增颜色变量 */
  
  border: 2px solid var(--border-color);
  /* 其他样式不变 */
}

然后模板里绑定颜色：

<mat-icon class="icon-with-border" 
  [style.--icon-font-size]="selectedIconSize"
  [style.--border-color]="'#FFC107'"
>star</mat-icon>

这种用CSS变量的方式更符合Angular组件化的思维，样式逻辑集中，模板只负责传递动态值，非常适合新手理解和维护～

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