angular - 如何在 Angular Material 中设置图标的颜色？

Question

我有这个，我认为它可以工作，但没有:

<mat-icon color="white">home</mat-icon>

那么，我还有:

<button mat-raised-button color="accent" type="submit"
 [disabled]="!recipientForm.form.valid">
    <mat-icon color="white">save</mat-icon>SAVE
</button>

出于某种原因，此代码片段确实有效(将图标显示为白色)。

如何使用 color 属性让单独的 mat-icon 显示为白色？ (我可以轻松地添加一个白色类，但我想了解这一点)

Answer 1

那是因为color输入只接受三个属性:"primary", "accent" or "warn"。因此，您必须以 CSS 方式设置图标样式:

1. 添加一个类来为您的图标设置样式:

   .white-icon {
       color: white;
   }
   /* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
   .white-icon svg {
       fill: white;
   }
   

2. 将类添加到您的图标:

   <mat-icon class="white-icon">menu</mat-icon>