Change color of custom icon in Angular Material

Question

I am registering custom icon with:

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

and using it with

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

But the icon is white and not seen. How can I change its color?
Tried with css no luck:

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

Thanks in advance

Ganesh · Answer 1 · 2020-12-17T12:36:23.937

2

Try to use ::ng-deep.

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

edited Dec 17 '20 at 12:36

answered Dec 04 '18 at 06:57

Ganesh

5,808
2
21
41

score 2 · Answer 2 · answered Dec 04 '18 at 07:03

2

you can use ::ng-deep but it depreciated now instead of that you have to look at :host-context

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

for more details - https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

answered Dec 04 '18 at 07:03

Samarth Saxena

1,121
11
18

Marshal · Answer 3 · 2018-12-04T16:07:47.863

0

You can do the following to change the color of mat-icon svgIcon

HTML

set mat- prefix in your CSS but ignore it when assigning it to the color attribute.
```
<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

edited Dec 04 '18 at 16:07

answered Dec 04 '18 at 13:51

Marshal

10,499
2
34
53

it still not changing color with path fill. the only solution found yet is to convert img svg with script. – Vugar Abdullayev Dec 07 '18 at 08:45
Please note, my solution is using `color` and not `fill` – Marshal Dec 07 '18 at 13:23

Change color of custom icon in Angular Material

3 Answers3