Material Design lite - 更改抽屉图标颜色答案

【问题标题】：material design lite - change drawer icon colorMaterial Design lite - 更改抽屉图标颜色
【发布时间】：2017-05-09 04:31:06
【问题描述】：

我找不到更改抽屉汉堡图标的方法。让我们来谈谈代码吧：

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>drawer icon color</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </head>

  <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header"></header>
        <div class="mdl-layout__drawer"></div>
    </div>
  </body>
</html>

输出

图标似乎是后来动态添加的，颜色设置为白色：

当我从铬控制台更改它的颜色时，一切都很好。
但是，如果我尝试使用 css 类，它就不起作用了：

.mdl-layout__header .mdl-layout__drawer-button {
  color: #000 !important;
}

我的问题

除了通过 DOM 动态更改颜色或直接弄乱 material.min.js 之外，我还有其他解决方案吗？

（也没有使用javascript成功更改颜色）

<script type="text/javascript">
  document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>

谢谢！ ♫♪祝你圣诞快乐♫♪♫

【问题讨论】：

我的建议是放弃 Material，而使用 FontAwesome。更少的代码，没有 JS，只有 CSS，它就可以工作......

标签： javascript html css frontend material-design-lite

【解决方案1】：

这个作品

    .material-icons {
  color: red !important;
}

【讨论】：

欢迎来到 StackOverflow！此选择器并非特定于汉堡包图标，但似乎确实有效。下次您可以考虑使用现场演示来展示您的答案在上下文中的作用。

【解决方案2】：

我已将材料图标中的i-tag 添加到您的CSS。这工作正常。见sn-p：

.mdl-layout__header .mdl-layout__drawer-button i {
  color: #000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>drawer icon color</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header"></header>
    <div class="mdl-layout__drawer"></div>
  </div>
</body>

</html>

【讨论】：

我已经尝试过这个答案，但是在一个链接到标题部分所在的角度组件的 CSS 样式表中。因此，该样式未应用于图标，角度组件仅将样式应用于与其链接的模板。感谢您的回复，您向我展示了它适用于 vanillia html/css 并且感谢我注意到我的错误与角度有关。我学到了一些东西！
感谢您的反馈！