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

Answer 1

Try to use ::ng-deep .

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

Answer 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

Answer 3

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