material design lite - 更改抽屉图标颜色

Question

我找不到更改抽屉汉堡包图标的方法。让我们用代码来说话：

代码

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

输出

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

当我从 chromium 控制台更改它的颜色时，一切正常。
但是如果我尝试使用 css class 它不起作用：

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

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

Answer 1

我已将 material 图标中的 i 标签添加到您的 CSS。这工作正常。请参阅代码段：

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

Answer 2

这项工作

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

material design lite - 更改抽屉图标颜色

material design lite - change drawer icon color

javascript

html

css

frontend

material-design-lite