更改Angular Material中自定义图标的颜色答案

【问题标题】：Change color of custom icon in Angular Material更改Angular Material中自定义图标的颜色
【发布时间】：2018-12-04 06:41:30
【问题描述】：

我正在注册自定义图标：

addCustomMaterialIcon(name: string, url: string) {
      this.matIconRegistry.addSvgIcon(
        name,
        this.domSanitizer.bypassSecurityTrustResourceUrl(`${url}`)
      );
}

并与它一起使用

<mat-icon svgIcon="vl-icon" class="y-icon" color="primary"></mat-icon>

但是图标是白色的，看不到。我怎样才能改变它的颜色？
尝试使用 css 没有运气：

.y-icon svg {
  fill: yellowgreen!important;
}

提前致谢

【问题讨论】：

标签： angular angular-material material-design angular-material2

【解决方案1】：

您可以使用 ::ng-deep 但它现在贬值了，而不是您必须查看 :host-context

::ng-deep .y-icon {
  fill: yellowgreen !important;
}

【讨论】：

【解决方案2】：

尝试使用::ng-deep。

 ::ng-deep .y-icon {
    fill: yellowgreen !important;
  }

【讨论】：

【解决方案3】：

您可以执行以下操作来更改mat-icon svgIcon的颜色

HTML

在您的 CSS 中设置 mat- 前缀，但在将其分配给 color 属性时忽略它。
```
<mat-icon svgIcon="thumbs-up" color="y-icon"></mat-icon>
```

CSS

.mat-y-icon  {
  color: yellowgreen;
}

堆栈闪电战

https://stackblitz.com/edit/angular-taqtkq?embed=1&file=app/icon-svg-example.css

【讨论】：

它仍然没有随着路径填充改变颜色。找到的唯一解决方案是使用脚本转换 img svg。
请注意，我的解决方案是使用color 而不是fill