mat-icon 在 Angular 中以灰色显示

Question

我想以红色显示 mat-icon，但它总是以灰色显示。 有没有办法以红色显示 mat-icon？ 如果有人知道请告诉我。 谢谢

 <mat-icon *ngIf="form.hasError('required', 'name') && isNameSubmitted" class="mdi mdi-24px mdi-alert-circle" matSuffix> </mat-icon>

Answer 1

可以按如下方式完成：

.mat-form-field .mat-icon {
   color: red;
}

Answer 2

使用 Angular 材质主题时，默认的警告颜色通常是红色。 在这种情况下，您可以使用：

<mat-icon color="warn">icon</mat-icon>

在使用材质组件时，这通常是一个很好的做法，因为它会影响您可能不会手动设置样式的元素的其他部分。