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>

输出

output result

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

browser generated code

当我从我的铬控制台改变颜色时，一切都很好但是，如果我尝试使用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>

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

Answer 1

这项工作

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

Answer 2

我已将材质图标中的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>

材料设计精简版 - 更改抽屉图标颜色

2 个答案: