Angular Material中如何将check_circle图标对勾设为黑色而非白色？

你当前的代码使用单个check_circle图标，它是一个统一的字体图标，无法单独拆分圆圈和对勾的颜色，所以设置color时会同时改变两者的颜色。要实现圆圈为指定颜色、对勾为黑色的效果，需要将图标拆分为背景圆圈和对勾两个独立的mat-icon组件，通过叠加定位来实现。

方法一：双图标叠加实现 #

将状态切换逻辑改为分别渲染不同的图标组合：

<!-- 选中状态：圆圈 + 黑色对勾 -->
<div class="checked-icon-wrapper" *ngIf="selectedColor === color.checkedCircleColor">
  <mat-icon [ngStyle]="{ color: color.checkedCircleColor }">circle</mat-icon>
  <mat-icon class="inner-check" style="color: black">check</mat-icon>
</div>

<!-- 未选中状态：仅显示普通圆圈 -->
<mat-icon 
  *ngIf="selectedColor !== color.checkedCircleColor"
  [ngStyle]="{ color: color.innerCircleColor }"
>circle</mat-icon>

然后添加CSS样式，确保对勾居中显示：

.checked-icon-wrapper {
  position: relative;
  display: inline-block;
}

.inner-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8em; /* 根据圆圈大小调整对勾尺寸，适配性更好 */
}

方法二：使用CSS类统一控制（更简洁） #

如果想减少模板中的重复代码，可以通过CSS类来控制状态：

<div class="icon-group" [class.checked]="selectedColor === color.checkedCircleColor">
  <mat-icon class="outer-circle" 
    [ngStyle]="{ color: selectedColor === color.checkedCircleColor ? color.checkedCircleColor : color.innerCircleColor }"
  >circle</mat-icon>
  <mat-icon class="inner-check">check</mat-icon>
</div>

对应的CSS：

.icon-group {
  position: relative;
  display: inline-block;
}

.inner-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8em;
  color: black;
  opacity: 0; /* 默认隐藏对勾 */
}

.icon-group.checked .inner-check {
  opacity: 1; /* 选中状态显示对勾 */
}

关键说明 #

• Material Icons的check_circle是单一字体字形，无法单独修改内部对勾的颜色，必须拆分图标实现独立样式控制。
• 通过相对+绝对定位确保对勾始终居中于圆圈，调整font-size可以让对勾和圆圈的比例更协调。

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