CODEWITHSUNDEEP
angularangular-materialmaterial-designangular-material2
Vugar Abdullayev
Vugar Abdullayev

Reputation: 2105

Change color of custom icon in Angular Material

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

Upvotes: 0

Views: 5828

Answers (3)

Ganesh
Ganesh

Reputation: 6016

Try to use ::ng-deep.

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

Upvotes: 2

Marshal
Marshal

Reputation: 11101

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

Upvotes: 0

Samarth Saxena
Samarth Saxena

Reputation: 1191

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

Upvotes: 2

Related Questions