javascripthtmlcssfrontendmaterial-design-lite

material design lite - change drawer icon color

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

output result

The icon seems to be added dynamically afterwards with colour set to white :

browser generated code

When I change its colour from my chromium console everything's fine.
But if I try using the css class it doesn't work :

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

(Didn't successfully change the colour using javascript neither)

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

Thanks ! ♫♪ I wish you a merry christmas ♫♪♫

Solution

  • I have added the i-tag from the material icons to your 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>