如何在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显示为白色？（我可以很容易地添加一个白色类，但我想要理解这个问题）

- Joshua Kemmerer

Answer 1

那是因为 color 输入框只接受三个属性："primary"、"accent" 或 "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>

- Edric

---

那肯定没问题，但为什么嵌在材料按钮下会起作用呢？ - Joshua Kemmerer

也许是因为它继承了颜色？毕竟它使用了 fill: currentColor;。 - Edric

@Vik SCSS有嵌套类。 - Edric

如果你的SVG内部定义了样式，你需要将它们移除。例如，经常会应用样式.a，这将优先于其他样式。请务必删除class='a'，而不仅仅是a { fill: ... }属性。 - Simon_Weaver

我之前从未听说过'mat-icon'中使用的'currentColor'（您实际上可以在去除类名后使用color: white代替fill: white）https://css-tricks.com/currentcolor/ - Simon_Weaver

Answer 2

在 component.css 或 app.css 中添加图标颜色样式。

.material-icons.color_green { color: #00FF00; }
.material-icons.color_white { color: #FFFFFF; }

在 component.html 文件中设置图标类。

<mat-icon class="material-icons color_green">games</mat-icon>
<mat-icon class="material-icons color_white">cloud</mat-icon>

ng build

- sfanjoy

---

这是一种更简单的完成工作的方法。起初我以为它是一种选择器，谢谢你的回答，我现在明白了。 - Brother Eye

Answer 3

或者简单地

将以下代码添加到您的元素中

[ngStyle]="{'color': myVariableColor}"

例如：

<mat-icon [ngStyle]="{'color': myVariableColor}">{{ getActivityIcon() }}</mat-icon>

其中color可以在另一个组件中定义等等。

- Jimmy Kane

---

避免在 .html 文件中使用函数，这是不好的实践。更多信息请参见此处 - https://blog.appverse.io/why-it-is-a-bad-idea-to-use-methods-in-the-html-templates-with-angular-2-30d49f0d3b16 - szymeo

@sgracki，您打算在SO上对每个答案都发表评论，解释为什么不使用那些方法吗？ - Jimmy Kane

是的，当然。目前我正在建立一支由资深Angular开发人员组成的团队，以提高这里的整体答案质量。 - szymeo

这与我关于颜色更改的回答有什么关系？@sgracki 另外，你所做的，超出了范围的评论，我认为这不符合社区标准。祝你建立团队并在博客上获得更多浏览量。我已经举报了这种行为。 - Jimmy Kane

没有冒犯的意思 :) 只是说在 .html 文件中使用函数不是一个好的编程实践。保持冷静，继续编码！最好的祝福！ - szymeo

很确定 ngStyle 是为此而生的。 - Bob Thomas

Answer 4

color="white"不是Angular Material中已知的属性。

颜色属性可以改为primary、accent和warn，如本文档所述。

您按钮内部的图标可以正常工作，因为其父类按钮具有color:white的CSS类，或者可能是您的color="accent"是白色的。请检查开发人员工具以找到它。

默认情况下，图标将使用当前字体颜色。

- Hareesh

Answer 5

<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>

- Matheus Frik

---

请添加一些描述。 - Mathews Sunny

Answer 6

给未来的读者，这里是解释。

你不能直接将HTML颜色（红色、白色、绿色）添加到“color”指令中。你只能添加primary、accent和warn。

引用块：

“color”指令所做的是根据给定的值向元素添加类。

e.g:

<mat-icon color="primary">home</mat-icon> <!-- this will add (.mat-primary) class -->
<mat-icon color="accent">home</mat-icon> <!-- this will add (.mat-accent) class -->
<mat-icon color="warn">home</mat-icon> <!-- this will add (.mat-warn) class -->

现在，这些类包含了 CSS 的 color 属性。

//This comes from material theming
.mat-primary {
 color: #3f51b5;
}

查看 颜色 - 内置主题 对于这些材料组件（mat-primary、mat-accent、mat-warn）有什么。

因此，如果您想全局更改每个材料组件的颜色，则创建自定义调色板。

如果您只想更改单个元素，则请遵循sfanjoy的 答案。

- Sameer

Answer 7

由于某些原因白色不可供选择，我发现mat-palette($mat-grey, 50)足够接近白色，至少对我的需求来说是这样。

- Naser AlOqab

Answer 8

这里是我正在使用的一种方法，用于动态设置颜色，如果变量未定义，则默认为主题颜色。

在您的组件中定义您的颜色。

  /**Sets the button colors - Defaults to primary them color */
  @Input('buttonsColor') _buttonsColor: string

使用您的风格（这里是Sass） - 这将强制图标使用其容器的颜色

.mat-custom{
  .mat-icon, .mat-icon-button{
     color:inherit !important;
  }  
}

在你的HTML中，用一个div包围你的按钮。

        <div [class.mat-custom]="!!_buttonsColor" [style.color]="_buttonsColor"> 
            <button mat-icon-button (click)="doSomething()">
                <mat-icon [svgIcon]="'refresh'" color="primary"></mat-icon>
            </button>
        </div>

- ShanieMoonlight