css - 使用 md-icon 设置 SVG 的颜色

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