32

我开始在我的项目中使用 Angular Material，我想知道如何更改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 的按钮演示中一样？（“使用字体图标的图标按钮”部分）

4

12 回答 12

17

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

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

到 md-icon 元素。

于 2015-04-12T17:43:24.753 回答
15

对于那些试图为他们的 md 图标着色的人，我发现我在使用 Angular 1.3.x 和 Angular Material 0.8.x 时遇到了同样的问题。

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

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

于 2015-05-02T18:42:41.370 回答
13

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

md-icon {
  color: red
}

md-icon svg {
  fill: inherit;
}
于 2015-09-04T14:48:28.900 回答
6

以下是我通过样式表让它工作的唯一方法。

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}
于 2015-04-23T19:29:58.457 回答
4

我在 CSS 中使用它：

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

在 HTML 中：

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

工作正常！

于 2015-12-15T08:53:18.087 回答
2

您应该可以通过在图标样式中添加“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>
于 2015-03-13T00:30:58.347 回答
2

将此添加到您的CSS：

svg {
    fill: inherit;
}

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

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
于 2016-10-16T16:26:07.173 回答
0

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

注意：使用我当前的 Angular-material (0.7.1) 版本，该<mdIcon></mdIcon>指令仅检查在 postLinking compileFunction 期间是否定义了 attr.Icon。使用此实现，为了引用您的 svg 图标文件，您只需将图标属性添加到您的<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 图标呈现为绿色而不是默认的黑色。我知道你们中的一些人可能正在使用不同版本的角度材料，但更改默认 svg 颜色的机制应该应用相同。希望对解决您的问题有帮助，谢谢！

于 2015-03-16T21:28:54.547 回答
0

问题似乎出在从Google Design 图标下载的 SVG 上，因为它们覆盖了 svg 根目录中的填充属性。将Google Design上的 SVG 视图源与示例中使用的视图源进行比较。

解决方案：：覆盖css中的填充。

md-icon svg {
    fill: currentColor;
}
于 2015-08-12T10:09:15.357 回答
0

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

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

于 2015-11-09T07:03:47.357 回答
0

最简单的出路

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

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

md-icon {
  color: #FFF !important;
}
于 2017-09-29T13:31:37.017 回答
0

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

我增强了 Jason Aunkst 的方法以使其发挥作用。这是解决方案：

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

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

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

于 2017-11-03T18:05:54.807 回答