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

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 中一样？（第 "Icon button using Font-icons"）

Answer 1

您应该可以通过将 "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 2

我在尝试更改默认 svg 图标颜色时遇到了类似的问题。对于遇到类似问题的用户，请确保检查您当前使用的 angular-material 版本。目前，我正在使用 angular-material "0.7.1"，这非常重要。

注意： 对于我当前的 Angular-material (0.7.1) 版本，<mdIcon></mdIcon> 指令仅检查是否attr.Icon 是否在 postLinking compileFunction 期间定义。使用此实现，为了引用您的 svg 图标文件，您只需将 icon 属性添加到 <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> 元素指令。注意在早期的 angular-material 版本中，您可能使用 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 文件是我从 https://github.com/google/material-design-icons 获得的未修改的 svg 图标。（默认渲染为黑色svg文件）

要更改默认的 svg 文件，您只需向原始 svg 文件添加一个填充属性。请参阅修改后的 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" />

我只是添加了 fill="green" 路径元素 svg 文件，现在我的 svg 图标呈现为绿色而不是默认的黑色。我知道你们中的一些人可能使用不同版本的 angular-material，但更改默认 svg 颜色的机制应该相同。希望对解决您的问题有所帮助，谢谢！

Answer 3

我在 angular-material 0.8，我只是添加了

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

到 md-icon 元素。

Answer 4

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

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

Answer 5

对于那些试图给他们的 md-icon 上色的人，我发现我在使用 Angular 1.3.x 和 Angular Material 0.[=22= 时遇到了同样的问题].

我通过编辑我的 SVG 文件并删除覆盖任何继承颜色的 "fill" 属性 解决了这个问题。

在每个 SVG 文件中删除这个 "fill" 属性后，由于 CSS .

，我可以正确地选择我想分配给图标的颜色

Answer 6

问题似乎与从 Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example 下载的 SVG 有关。

解决方法：：覆盖填写css.

md-icon svg {
    fill: currentColor;
}

Answer 7

SVG 在 md-icon 下，因此您可以将其添加到您的样式中：

md-icon {
  color: red
}

md-icon svg {
  fill: inherit;
}

Answer 8

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

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 9

我在 CSS 中使用它：

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

并且在 HTML 中：

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

工作正常！

Answer 10

将此添加到您的 css：

svg {
    fill: inherit;
}

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

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

Answer 11

最简单的出路

现在无需更改 svg 或填充属性。

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

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

Answer 12

我遇到了类似的问题，我需要使用 CSS 更改 SVG 颜色，但当没有 [=19] 时我还需要保留原始 SVG 颜色（例如 fill="#fff"） =] 已提供。

我改进了 Jason Aunkst 的方法使其发挥作用。解决方法如下：

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

只要 svg 是包含具有颜色值的样式属性的 md-icon 元素的子元素，class 就会将任何具有填充属性的 svg 子元素设置为继承颜色值。

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

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

How do I change the color of an md-icon in Angular Material?

angularjs

angular-material

最简单的出路