Angular-Material：样式 mat-icon 元素不同，使用 css，基于图标类型

Question

在我的代码中，我使用了 Angular 材料库中的几个图标。

我可以根据他们的真实类型对他们应用不同的 css styles 吗？

例如：我需要文件夹具有不同的颜色，并且我只需要在某个 css 主题中执行此操作，因此我需要通过应用自定义 css 样式来获得它。

我试过类似的东西：

 <mat-icon class="mat-icon-folder">folder</mat-icon>

接着

.mat-icon#mat-icon-folder {
    color: #FFDA6B;
}

或者

.mat-icon-folder {
    color: #FFDA6B;
}

在我的 css 文件中，但没有成功。

有任何想法吗？ 谢谢。

Answer 1

您有多种方法可以在图标上应用样式。 您可以查看此在线示例，这里有一些参考资料可帮助您编写有效的 CSS。

• CSS 选择器
• CSS 特异性

/* by tag name */
mat-icon {
  color: red;
}

/* by class selector */
.mat-icon-folder {
  color: #ffda6b;
}

/* by tag name and class selector */
mat-icon.mat-icon-folder {
  color: blue;
}

/* by tag name and id selector */
mat-icon#folder-icon {
  color: purple;
}