CODEWITHSUNDEEP
csssvgmaterial-design
cicciosgamino
cicciosgamino

Reputation: 964

Use md-icon to set the color of SVG

I'm trying to use the md-icon directive of Google Material Design, so I cannot change the color of the SVG icon I use.

Here's 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 colored is to use the SVG instead of the 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'm trying to find an easy solution to set the position, color, and size in md-icon.

Upvotes: 3

Views: 4902

Answers (4)

Gerard Carb&#243;
Gerard Carb&#243;

Reputation: 1905

Just use the fill property on style as explained on:

https://klarsys.github.io/angular-material-icons/

Upvotes: 0

Kriti
Kriti

Reputation: 2393

Just replace the 'fill' attribute value in the SVG File of icon to change the color of the icon.

 <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>

In place of 'red' you can use any color

Upvotes: 0

Roland Mauricio Cruz Velandia
Roland Mauricio Cruz Velandia

Reputation: 61

You could try something like that

md-icon {
  svg {
    path {
      fill: red !important;
    }
  }
}

Remember the !important

Upvotes: 2

hebinda
hebinda

Reputation: 519

Here is a nice directive to change color of 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);
        });
      }
    }
  };
});

Upvotes: 0

Related Questions