如何更改Angular Material中md-icon的颜色？

Question

我开始在我的项目中使用Angular Material,我想知道如何更改内部的svg颜色am-button.

这是我的代码:

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

我需要添加什么才能将svg的颜色从黑色变为白色,就像Google的按钮演示一样？("使用字体图标的图标按钮"部分)

Answer 1

我是角度材料0.8,我只是补充说

    style="color:white;font:bold;" 

到md-icon元素.

Answer 2

对于试图给他们的md-icon上色的人来说,我发现使用Angular 1.3.x和Angular Material 0.8.x我遇到了同样的问题.

我通过编辑SVG文件并删除覆盖任何继承颜色的"填充"属性来解决问题.

删除每个SVG文件中的"填充"属性后,我可以正确选择我想要分配给图标的颜色,这要归功于Jason Aunkst指定的 CSS .

Answer 3

SVG嵌套在ng-icon下,所以你只需要将它添加到你的CSS中,然后添加fill:red; 到ng-icon的样式.

md-icon svg {
  fill: inherit;
}

Answer 4

以下是我通过样式表使用它的唯一方法.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}