Question

我正在使用以下方式注册自定义图标：

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

预先感谢

Answer 1

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

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

了解更多详细信息-https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 2

@Vugar Abdullayev，您是否尝试过::ng-deep

尝试

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

编辑：

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

Answer 3

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

HTML

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

CSS

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

Stackblitz

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

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

3 个答案: