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

Question

I can't find a way to change the drawer hamburger icon.我找不到更改抽屉汉堡图标的方法。 Let's the code doing the talk :让我们用代码说话：

THE CODE编码

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

THE OUTPUT输出

输出结果

The icon seems to be added dynamically afterwards with colour set to white :该图标似乎是随后动态添加的，颜色设置为白色：

浏览器生成的代码

When I change its colour from my chromium console everything's fine.当我从我的 Chromium 控制台改变它的颜色时，一切都很好。
But if I try using the css class it doesn't work :但是，如果我尝试使用 css 类，则它不起作用：

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

MY QUESTION我的问题

Do I have any other solutions than changing the colour dynamically through the DOM or directly messing with material.min.js?除了通过 DOM 动态更改颜色或直接使用 material.min.js 之外，我还有其他解决方案吗？

(Didn't successfully change the colour using javascript neither) （也没有使用 javascript 成功更改颜色）

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

Thanks !谢谢！ ♫♪ I wish you a merry christmas ♫♪♫ ♫♪ 祝你圣诞快乐♫♪♫

Answer 1

this work这项工作

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

Answer 2

I have added the i -tag from the material icons to your CSS.我已将材质图标中的i标签添加到您的 CSS 中。 This is working fine.这工作正常。 See snippet:见片段：

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

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

问题描述

2 个解决方案

解决方案1
2 2020-08-10 20:49:13

解决方案2
0 已采纳 2016-12-23 14:59:23

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

问题描述

2 个解决方案

解决方案1 2 2020-08-10 20:49:13

解决方案2 0 已采纳 2016-12-23 14:59:23

解决方案1
2 2020-08-10 20:49:13

解决方案2
0 已采纳 2016-12-23 14:59:23