Change color of custom icon in Angular Material

angular material icons
mat icon how to change color
angular material glyphicons
angular material icons example
install angular material icons
material icon color
mat-icon hover color
angular material menu icon

I am registering custom icon with:

addCustomMaterialIcon(name: string, url: string) {

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

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 -

How to set the color of an icon in Angular Material?, 6 Answers. Just add a class to style your icon: . white-icon { color: white; } /* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */ . white-icon svg { fill: white; } Add the class to your icon: <mat-icon class="white-icon">menu</mat-icon> For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x. I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.

@Vugar Abdullayev, have you tried with ::ng-deep

try this

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


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

Change color of custom icon in Angular Material - angular - html, Change color of custom icon in Angular Material - angular. You can do the following to change the color of mat-icon svgIcon HTML set mat- prefix in your CSS  You can change the color of the button only in the normal css way by defining a class for background color orange and using it as class attribute. If you need to use it as color="orange". Then you need to create your own theme with the colors you need. Refer Theming your angular material app on how to do it.

How to properly change the color of a mat-icon with angular?, I want to get my mat-icon to change color with the color palette because this should Style Add a custom style class with color specified: .green-icon { color: green; } (I do not want to change the Angular Material theme I just want to be able to  5. Now suppose you want to set your own color on the form-field borderline and in button, you can’t change the color manually as you are using an angular-material-theme, so for this, you need to

Overriding Angular Material Component Colors, For cases where the default colors do not provide a complete solution. resources that extend or modify the component styles and colors of the Angular Material Design framework. Here .mat-blue is defined, the custom color for our button. Let’s learn how to use our own SVG icons in Angular Material components. This post assumes you have some basic knowledge of Angular v4.2+. The Angular version used in this example is v5.2+ and the angular material version is v5.2.4. The first part of this post introduces the setup steps required to display the default material icons.

Icon, This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the color style on the mat-icon element. Change google material design icon color example. By using style property we can easily change the color of material design icons

Angular Material Dynamic Suffix Icon Color Change, Scenario. We want to change the search suffix icon color to primary when the #​searchInput field is focused. Approach. UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

  • i think the problem with svg, it doesn't require. Becuase your already applying the styles with the class name. Try with edited answer
  • it still not changing color with path fill. the only solution found yet is to convert img svg with script.
  • Please note, my solution is using color and not fill