设置 SVG Material Design Icons 的背景颜色答案

【问题标题】：Set background color of SVG Material Design Icons设置 SVG Material Design Icons 的背景颜色
【发布时间】：2015-01-09 15:20:11
【问题描述】：

我使用这里描述的方法使用 Material Design 图标：

https://github.com/google/material-design-icons#using-svg-sprites

但是，图标总是以黑色结束。我应该如何将它们的颜色更改为白色？

我知道可以编辑 SVG 源代码以达到效果的可能性，但这似乎不是规范的方法。 Material Design 图标库根据颜色有不同版本的 CSS 图像精灵，而 SVG 只有一种颜色（事实上，没有颜色，因为 SVG 代码中从未提及颜色）。如果我需要不同的 SVG sprite 文件用于白色或黑色图标，它们会包含不同的版本，就像它们在 CSS 图像 sprite 的情况下所做的那样，不是吗？

【问题讨论】：

它将在样式表中...可能是fill 或stroke
我也有同样的问题。你设法让它工作了吗？

标签： css svg sprite-sheet material-design

【解决方案1】：

给出的代码是谷歌材料设计的“左V形”图标的示例。

现在，如果您想更改图标的颜色，请在第一个路径标记中添加 fill 属性。

如果您想更改其背景颜色，请在第二个路径标记中添加 fill 属性。对于没有背景颜色，给它的属性none。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fill="#fff"/>
    <path d="M0 0h24v24h-24z" fill="none"/>
</svg>

【讨论】：

【解决方案2】：

这应该只是为您的图标设置fill 属性的问题。例如，将一个名为“red”的类添加到您的图标<div>：

<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims red"></div>

然后在你的 CSS 中定义类 red"。

.red {
   fill: #ff0000;
}

请注意，您使用 fill 属性设置 SVG 元素的填充颜色，而不是像 HTML 元素那样设置“颜色”等。

【讨论】：

遇到了同样的问题。可悲的是，这对我不起作用
谢谢。必须从 SVG 文件中删除 Fill=#0000 但随后 CSS 代码开始工作

【解决方案3】：

我遇到了同样的问题 - 最终更改了图标的填充源：

<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"
      fill='white'/>

【讨论】：

【解决方案4】：

我面临着完全相同的问题。唯一对我有用的解决方案是手动编辑 .svg 文件以在每个路径中添加 fill="white"。但是，我不喜欢 .svg 文件中的硬编码颜色。

由于我在项目中使用了 angularjs，因此我编写了一个 angularjs 指令，该指令可以生成具有自定义填充颜色/大小的 svg 图标。我在这里分享它，以防有人发现它有用：https://klarsys.github.io/angular-material-icons/demo.html

【讨论】：

请附上如何“设置 SVG Material Design 图标的背景颜色”的相关示例。而不仅仅是链接到异地项目。
@EWit，除了手动编辑 .svg 文件，我找不到任何其他方法。

【解决方案5】：

您可以尝试将其打包成字体文件并像Glyphicons in Bootstrap 一样使用它。然后，您可以根据需要使用颜色和背景颜色对其进行归因。

【讨论】：