如何在Angular Material中设置图标的颜色?

问题描述

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

I have this, which I would assume to work, but doesn't:

<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>

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

This code snippet, for some reason, does work (shows the icon as white).

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

How do I get the lone mat-icon to show up as white using the color attribute? (I can easily just add a white class, but I want to understand this)

推荐答案

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

That's because the color input only accepts three attributes: "primary", "accent" or "warn". Hence, you'll have to style the icons the CSS way:

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

1. Add a class to style your icon:

.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;
}

将类添加到您的图标:

Add the class to your icon:

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

这篇关于如何在Angular Material中设置图标的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！