Question

我使用此处描述的方法使用Material Design Icons：

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

然而，图标总是以黑色结束。我该怎么把它们的颜色改成白色？

我知道可以编辑SVG源代码以实现这种效果，但这似乎不是规范的方法。材料设计图标存储库的CSS图像精灵在不同的版本中取决于颜色，而SVG只有一种颜色（事实上，没有颜色，因为SVG代码中没有提到任何颜色）。如果我需要不同的SVG精灵文件用于白色或黑色图标，它们会包含不同的版本，就像他们在CSS图像精灵的情况下那样，不是吗？

Answer 1

给定的代码是google材料设计的“左侧雪佛龙”图标的示例。

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

如果您想更改其背景颜色，请在第二个路径标记中添加fill属性。如果没有背景颜色，则将无添加到其属性中。

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

Answer 2

您可以尝试将其打包成字体文件，然后像Glyphicons in Bootstrap一样使用它。然后，您可以根据需要将其与颜色和背景颜色相关联。

Answer 3

我遇到了同样的问题。只有对我有用的解决方案是手动编辑.svg文件以在每个路径中添加fill="white"。但是，我不喜欢.svg文件中的硬编码颜色。

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

Answer 4

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

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

Answer 5

应该只为您的图标设置fill属性。例如，添加一个名为＆＃34; red＆＃34;到你的图标<div>：

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

然后定义类red＆＃34;在你的CSS中。

.red {
   fill: #ff0000;
}

请注意，您使用fill属性设置SVG元素的填充颜色，而不是＆＃39;颜色＆＃39;与HTML元素一样。

设置SVG Material Design Icons的背景颜色

5 个答案: