Css 设置SVG材质设计图标的背景色

我使用此处描述的方法使用材质设计图标：

然而，图标总是以黑色结束。我该如何把它们的颜色，比如说，变成白色

---

我知道可以编辑SVG源代码以达到效果，但这似乎不是一种规范的方法。“材质设计图标”存储库根据颜色的不同，有不同版本的CSS图像精灵，而SVG只有一种颜色（事实上，没有颜色，因为SVG代码中从来没有提到过颜色）。如果我需要用于白色或黑色图标的不同SVG精灵文件，它们会像CSS图像精灵一样包含不同的版本，不是吗？

您可以尝试将其打包到字体文件中，然后像使用一样使用它。然后，您可以根据需要使用颜色和背景色对其进行属性设置

只需设置图标的

fill

属性即可。例如，在图标中添加一个名为“red”的类：

---

请注意，您使用

fill

属性设置SVG元素的填充颜色，而不是像HTML元素那样设置“color”等。

我遇到了完全相同的问题。唯一适合我的解决方案是手动编辑.svg文件，在每个路径中添加

fill=“white”

。但是，我不喜欢.svg文件中的硬编码颜色

---

因为我在我的项目中使用了angularjs，所以我编写了一个angularjs指令，用于生成具有自定义填充颜色/大小的svg图标。我在这里分享它，以防有人发现它有用：

我也有同样的问题-最后更改了图标的填充源：

---

给定的代码是google material design“左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>

它将出现在样式表中……可能是因为

填充

或

笔划

我也有同样的问题。你设法让它工作了吗？有同样的问题。遗憾的是，这对我不起作用。请提供如何“设置SVG材质设计图标的背景色”的相关示例。除了手动编辑.svg文件之外，我找不到任何其他方法，而不仅仅是链接到一个非现场项目。@EWit。

.red {
   fill: #ff0000;
}

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

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