时间戳

首页 > 解决方案 > mat-icon css 颜色样式不适用

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

问题描述

作为 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 }

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

谁能解释原因

标签： cssangular-materialangular9angular-material-6angular-material-7

解决方案

您可以像这样将样式应用于 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>

推荐阅读