Question

我正在尝试使用Google Material Design的md-icon指令，因此我无法更改我使用的SVG图标的颜色。

这是我使用的代码：

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

我可以获得图标颜色的唯一方法是使用SVG而不是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;
}

我正在尝试找到一个简单的解决方案来设置md-icon中的位置，颜色和大小。

Answer 1

你可以尝试类似的东西

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

记住！important

Answer 2

Here是改变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);
        });
      }
    }
  };
});

Answer 3

只需更换＆＃39;填充＆＃39;图标的SVG文件中的属性值可以更改图标的颜色。

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

取代红色＆＃39;你可以使用任何颜色

Answer 4

只需在样式上使用fill属性，如下所述：

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

使用md-icon设置SVG的颜色

4 个答案: