Menu
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")
918
If you want to use Jquery$(". material-icons"). css("color", themeColor); This will change color of the material icons inside an element eg input field.
Named iconsAfter registering an icon, it can be displayed by setting the svgIcon input. For an icon in the default namespace, use the name directly. For a non-default namespace, use the format [namespace]:[name] .
I'm on angular-material 0.8, and I simply added
style="color:white;font:bold;" to the md-icon element.
108
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
