新材料设计图标主题-设置颜色

Question

我正在寻找一种便携的解决方案来着色一些图标。我的原始问题如下所述，在我的MacBook浏览器和火狐浏览器中，在Safari中，颜色按预期工作。评论员报告说，这些颜色在Windows上的Chrome中的效果与预期一致。

我有一个使用Material Design图标的简单jQuery网络应用程序。我可以使用CSS设置图标的颜色，一切都很好。然而，对于一些图标，特别是文件夹，新的轮廓主题更适合我的应用程序，而且CSS颜色似乎没有任何影响。

这里有一个很好的设置图标颜色here的例子，如果我把这个例子改写成这样：

​

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<title>Change Color of Google Material Design Icons Example</title>

<i class="material-icons">folder</i>
<i class="material-icons" style="font-size:40px;color:green">folder</i>
<i class="material-icons-outlined" style="font-size:50px;color:blue">folder</i>

​

在我的MacBook上的所有浏览器上，我看到标准的material-icons文件夹都是绿色的。在Safari上，我看到了预期的结果:文件夹的轮廓是蓝色的。然而，在Chrome和Firefox上，轮廓仍然是黑色的。这种行为模式适用于扩展主题、双色调等中的所有图标。

请给我一些建议。

Answer 1

我知道这是一个老帖子，但也许有些人还在寻找答案。

轮廓图标似乎可以与css颜色设置一起正常工作：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-outlined" style="color:green">home</i>

设置双色调颜色：

如上所述，您可以使用color css键，除了材料Two-tone主题，这似乎是小故障;-)

在几种角度材质github issue中描述了一种使用自定义css滤镜的变通方法。此自定义滤镜可以由here生成。

例如：

Html：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

css：

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

附件：

• Working Angular Stackblitz
• Codepen example
• Codepen CSS filter Generator

Answer 2

因为材质图标是svg的，所以您需要访问子svg元素，并操作SVG值。它们不受color属性的影响

.material-icons svg {
  fill: white; // The filling
  stroke: black; // the outline - this depends on how the svg is drawn
}