Use md icon to set SVG color
I am trying to use the directive md-icon
for Google Material Design, so I cannot change the color of the SVG icon that I am using.
Here is the code I used:
<!-- black SVG (DO NOT Color ) -->
<h2 style="color:red;">md-icon
<md-icon icon="bower_components/material-design-icons/action/svg/design/ic_android_24px.svg"></md-icon>
</h2>
The only way I can get the icon is to use SVG instead md-icon
:
<!-- colored -->
<h2 style="color:red;"> COLORED
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M22 12c2.76 0 5.26 1.12 7.07 2.93L24 20h12V8l-4.1 4.1C29.37 9.57 25.87 8 22 8 14.95 8 9.13 13.22 8.16 20h4.04c.93-4.56 4.96-8 9.8-8zm11.28 18.27c1.33-1.81 2.23-3.95 2.56-6.27H31.8c-.93 4.56-4.96 8-9.8 8-2.76 0-5.26-1.12-7.07-2.93L20 24H8v12l4.1-4.1c2.53 2.53 6.03 4.1 9.9 4.1 3.1 0 5.96-1.02 8.28-2.73L40 42.98 42.98 40l-9.7-9.73z"/></svg>
</h2>
/* CSS used in second in colored version (that WORKS) */
svg {
width: 32px;
height: 32px;
fill: currentColor;
color: currenColor;
}
I am trying to find a simple solution for setting position, color and size in md-icon
.
You can try something like this
md-icon {
svg {
path {
fill: red !important;
}
}
}
Remember! important
Here is a good guideline for changing the color of the md icon.
/**
* Markup
* <md-icon icon-fill="red" icon="'/img/icons/test.svg'" style="width: 32px; height: 32px;"></md-icon>
*/
angular.module('material.components.icon.extra', [
'ngMaterial'
])
.directive('iconFill', function () {
return {
restrict: 'A',
link: function(scope, element, attr) {
var object = angular.element(element[0].children[0]);
if(angular.isDefined(attr.iconFill)) {
object.load(function () {
var svg = angular.element(this.getSVGDocument().documentElement);
svg.attr('fill', attr.iconFill);
});
}
}
};
});
Just replace the value of the "fill" attribute in the icon's SVG file to change the icon's color.
<svg fill="red" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
You can use any color instead of "red"
Just use the style fill property as described in:
https://klarsys.github.io/angular-material-icons/