Question

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

这是我的代码：

<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's button demo中一样？（＆＃34;图标按钮使用字体图标＆＃34; ）

Answer 1

我在角度材质0.8上，我只是添加了

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

到md-icon元素。

Answer 2

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

md-icon svg {
  fill: inherit;
}

Answer 3

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

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

Answer 4

我在CSS中使用它：

.my-icon svg
{
   fill : #fff;
}

在HTML中：

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

工作正常！

Answer 5

您应该可以通过在图标样式中添加“fill：white”来完成此操作。

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>

Answer 6

将此添加到您的css：

svg {
    fill: inherit;
}

svg现在将继承md-icon的填充属性

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>

Answer 7

我在尝试更改默认的svg图标颜色时遇到了类似的问题。对于遇到类似问题的人，请务必检查您当前使用的角度材料版本。目前，我正在使用角度材料“0.7.1”，这一点非常重要。

注意：使用我当前的Angular-material（0.7.1）版本，<mdIcon></mdIcon>指令仅检查在postLinking compileFunction期间是否定义了attr.Icon。通过此实现，为了引用您的svg图标文件，只需在您的<mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>元素指令中添加图标属性即可。请注意，在早期的角度材质版本中，您可能使用md-src-svg来引用您的svg文件，在0.7.1版本中不再是这种情况。

因此，如果您使用0.7.1并遵循上述说明，则应该正确渲染您的svg图标，现在是时候更改您正在使用的svg的背景颜色了。

任何修改之前

原始svg文件：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

你应该在你的项目中有一个文件夹，你保存所有的svg图标，在我的情况下，我有一个名为icons的文件夹，我存储了所有的svg图标。上面的示例svg文件是未修改的svg图标，我从https://github.com/google/material-design-icons获取它。（默认将其渲染为黑色svg文件）

要更改默认的svg文件，只需在原始svg文件中添加fill属性即可。请参阅已修改的svg文件版本：

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

我只是添加了填充=“绿色”路径元素svg文件，现在我的svg图标呈现为绿色而不是默认黑色。我知道你们中的一些人可能正在使用不同版本的角度材料，但更改默认svg颜色的机制应该应用相同的。希望这对解决您的问题很有帮助，谢谢！

Answer 8

问题似乎来自Google Design icons下载的SVG，因为它们覆盖了svg根目录中的fill属性。将SVGs on Google Design的观看源与used in the example的观看源进行比较。

解决方案：：覆盖填写css。

md-icon svg {
    fill: currentColor;
}

Answer 9

一种方法是设置自定义类选择器。

HTML：

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS：

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

Codepen：http://codepen.io/anon/pen/pjxxgx

Answer 10

最简单的出路

现在无需更改svg或fill属性。

只需在CSS中添加!important到md-icon的颜色属性：

md-icon {
  color: #FFF !important;
}

Answer 11

我遇到了类似的问题，我需要使用CSS更改SVG颜色，但是当没有提供CSS时，我还需要保留原始的SVG颜色（例如fill =＆＃34; #ffff＆＃34;）。

我加强了Jason Aunkst的方法，让它发挥作用。这是解决方案：

org.eclipse.e4.ui.css.swt.properties.css2.CSSPropertyMarginSWTHandler

只要svg是包含带有颜色值的style属性的md-icon元素的子元素，该类将使用fill属性设置任何svg的子元素以继承颜色值。

它仅适用于仅使用一种填充颜色的SVG。根据需要调整，希望它有所帮助！

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

11 个答案:

最简单的出路