mat-icon css颜色样式不适用。

Question

作为一个刚接触Angular的人，我有一个疑问，在Angular 4中，我们有一个来自MdIconModule的md-icon标签，在后来的Angular版本中被改成了MatIconModule。

请看一段Angular 4中的代码

app.component.html

<md-icon>add_alert</md-icon>

app.componentn.css

md-icon.add-alert{ color : purple }

在上面的代码中，图标已经从黑色变成了紫色。

但在Angular 9中。

app.component.html

<mat-icon>add_alert</mat-icon>

app.componentn.css

mat-icon.add-alert{ color : purple }

上面的代码并没有改变颜色，而且我们还需要手动添加标签中的类来改变颜色。

谁能解释一下原因？

Answer 1

你可以这样给mat-icon套上样式。

::ng-deep{
   mat-icon {
        font-size: 24px;
        color: #3b86ff;
      }
 }

或

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


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