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

Question

我正在寻找一种便携式解决方案来为某些图标着色。下面描述的我最初的问题在我的 MacBook 上的 Chrome 和 Firefox 中出现，在 Safari 中，颜色按预期工作。评论员报告说，这些颜色在 Windows 上的 Chrome 中可以正常工作。

我有一个使用 Material Design 图标的简单 jQuery Web 应用程序。我可以使用 CSS 设置图标的颜色，一切都很好。但是对于一些图标，特别是文件夹，新的 Outlined 主题更适合我的应用程序，而且似乎 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 上的所有浏览器上，我看到标准材料图标文件夹采用绿色。在 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 主题似乎有问题;-)

使用自定义 css 过滤器在几个有角材料 github issue 之一中描述了一种解决方法。这个自定义过滤器可以生成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%);
}

附件：

• 工作角度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
}