How do I change the color of an md-icon in Angular Material?

Question

I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button.

This is my code:

<md-button class="md-fab md-primary">
    <md-icon
        class="ng-scope ng-isolate-scope md-default-theme"
        style="height: 14px; width: 14px;"
        md-svg-src="img/material-icons/core/arrow-forward.svg"
    ></md-icon>
</md-button>

What do I need to add to change the color of the svg from the curent black to white, just like in Google's button demo? (section "Icon button using Font-icons")

did you review the css they supply with the sample on that page? — Claies, Mar 13 '15 at 00:27
Yes but I didn't notice anything that relates to the buttn's color... — maryum375, Mar 13 '15 at 00:41
I'm having a similar issue of changing the default svg color on the angular material design. Also I wasn't be able to render any svg icons on the directive when I specified md-svg-src="path to my svg file". I was able to fix my problem by replacing md-svg-src to icon="place to svg files". When I looked at the actual angular material source code on , it was specified looking for attr.icon in its compile function, do you mind posting the angualr-material version you're using? Thanks a lot! — JayKan, Mar 16 '15 at 20:40
Just FYI, I'm currently using angular-material 0.7.1, and to I was able to change my svg color by actually modifying the source svg file for my icon. In my case, I was able to add a custom "fill" attribute to my raw svg icon file. . (fill attribute can be any color you want) hopefully this can solve your color changing issue. — JayKan, Mar 16 '15 at 20:56
I'm on 1.0.6 and having a problem setting icon color. It appears that it is more tightly binding to the `md-theme` which is showing as an insert to the header of the file than to any class we can define. If we define a style directly as `md-icon(style="color:white")` it takes, otherwise not. Frustrating. — DavidNJ, Mar 30 '16 at 15:51

score 17 · Answer 1 · answered Apr 12 '15 at 17:43

17

I'm on angular-material 0.8, and I simply added

    style="color:white;font:bold;"

to the md-icon element.

answered Apr 12 '15 at 17:43

thunk

434
3
10

Just remember to remove the **fill** attribute from the svg element – Ismar Slomic May 08 '15 at 10:35

score 15 · Accepted Answer · edited May 23 '17 at 12:26

15

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.

After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.

edited May 23 '17 at 12:26

Community

1
1

answered May 02 '15 at 18:42

MeuhMeuh

826
6
26

I think the answer http://stackoverflow.com/a/32400924 by @jason-aunkst is better approach and should be the accepted answer. – Krishna Jan 14 '17 at 05:29
Unfortunately, in some cases, you won't be able to override the CSS property if the "fill" attribute is specified in the SVG. Both answers are good as his answer won't work without mine. I'll just update my last sentence to be clear. – MeuhMeuh Jan 14 '17 at 09:38

score 13 · Answer 3 · edited Aug 26 '20 at 01:34

13

The SVG is under the md-icon, so you could add this to your style:

md-icon {
  color: red
}

md-icon svg {
  fill: inherit;
}

edited Aug 26 '20 at 01:34

developer033

24,267
8
82
108

answered Sep 04 '15 at 14:48

Jason Aunkst

161
1
4

score 6 · Answer 4 · answered Apr 23 '15 at 19:29

6

The following is the only way I've gotten it to work via stylesheets.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}

answered Apr 23 '15 at 19:29

thrice801

1,671
5
23
31

score 4 · Answer 5 · answered Dec 15 '15 at 08:53

4

Am using this in the CSS :

.my-icon svg
{
   fill : #fff;
}

And in the HTML :

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

Works fine!

answered Dec 15 '15 at 08:53

Pramit Kundu

51
4

score 2 · Answer 6 · answered Mar 13 '15 at 00:30

2

You should be able to do this by add "fill:white" to the style of the icon.

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>

answered Mar 13 '15 at 00:30

Mark Collins

378
1
2
8

I had a look at the CSS from the material design website and the code impacting the SVG color is on line 3901 docs.css. Perhaps your could try adding another class to overwrite the original one. Such as `md-icon { fill:blue !important }` – Mark Collins Mar 13 '15 at 01:40
I did and chrome does show in the computed tab that the fill property of the object is the color I chose but the actual color of the svg in the page does not change – maryum375 Mar 13 '15 at 02:07
Hmmmm... Ok. What about if you change the color of button? Given that the SVG is inheriting the color. Something like this... ` ` – Mark Collins Mar 13 '15 at 02:14
Still can't see any effect on the element as if it is not the right property :( – maryum375 Mar 13 '15 at 09:33
Sorry I'm out of ideas :( – Mark Collins Mar 13 '15 at 10:32

score 2 · Answer 7 · edited Oct 16 '16 at 17:02

2

Add this to your css:

svg {
    fill: inherit;
}

The svg will now inherit the fill attribute of your md-icon

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>

edited Oct 16 '16 at 17:02

Racil Hilan

24,690
13
50
55

answered Oct 16 '16 at 16:26

Jose Sevilla IV

21
1

score 0 · Answer 8 · answered Mar 16 '15 at 21:28

I was having a similar problem when trying to change default svg icon color. For those who are experiencing the similar issue, make sure you check the angular-material version you're currently using. Currently, I'm using the angular-material "0.7.1" and this is quietly important.

NOTE: with my current Angular-material (0.7.1) version, the <mdIcon></mdIcon> directive only checks to see if attr.Icon is defined or not during postLinking compileFunction. With this implementation, in order to reference your svg icon files, you simply add icon attribute to your <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> element directive. Notice in the earlier angular-material version, you might have use md-src-svg for referencing your svg files, its no longer the case in 0.7.1 version.

So if you were using 0.7.1 and following above instruction, you should have your svg icon rendering correctly, now its time to change the background-color of the svg you're using.

Raw svg file before any modification:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

You should have a folder within your project where you save all your svg icons, in my case, I have a folder named icons where I store all my svg icons. The example svg file above is the non-modified svg icon where I got it from https://github.com/google/material-design-icons. (Default its rendering as a black svg file)

To change the default svg file, you would simple add a fill attribute to your raw svg file. See modified svg file version:

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

I simply added fill="green" the path element svg file, and now my svg icon is rendering as color green instead of default black. I know some of you guys might be using a different version of angular-material, but the mechanism of changing default svg color should apply the same. Hopefully this can be helpful to solve your problems, thanks!

score 0 · Answer 9 · answered Aug 12 '15 at 10:09

The issue seems to be with the downloaded SVGs from Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example.

Solution:: Override fill in css.

md-icon svg {
    fill: currentColor;
}

score 0 · Answer 10 · answered Nov 09 '15 at 07:03

One way to do it is by setting a custom class selector.

HTML:

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS:

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

Codepen here: http://codepen.io/anon/pen/pjxxgx

score 0 · Answer 11 · answered Sep 29 '17 at 13:31

0

Easiest way out

Now there's no need to change the svg or the fill property.

Simply add the !important to md-icon's color property in CSS:

md-icon {
  color: #FFF !important;
}

answered Sep 29 '17 at 13:31

Sagar

3,107
2
26
35

score 0 · Answer 12 · answered Nov 03 '17 at 18:05

I was having a similar problem, I needed to change the SVG color using CSS, but I also needed to keep the original SVG color (e.g. fill="#fff") when no CSS was supplied.

I enhanced Jason Aunkst's approach to make it work. Here's the solution:

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

That class will set any svg's child element with a fill attribute to inherit the color value as long as the svg is a child of an md-icon element that contains the style attribute with a color value.

It will only work on SVG's that are only using one fill color though. Adjust as needed, hope it helps!

How do I change the color of an md-icon in Angular Material?

12 Answers12

Easiest way out