6

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 ♫♪♫

Grundy
  • 13,356
  • 3
  • 35
  • 55
lemour_a
  • 155
  • 1
  • 7
  • My suggestion would be to go away from Material, and instead use FontAwesome. Less code, no JS, just CSS, and it just works... – junkfoodjunkie Dec 23 '16 at 13:11

2 Answers2

2

this work

    .material-icons {
  color: red !important;
}
atunde arisekola
  • 51
  • 3
  • 1
    Welcome to StackOverflow! This selector is not specific to the hamburger icon but does seem to work. You could consider using a live demo next time to show how your answer works in context. – GKFX Aug 10 '20 at 21:01
0

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>
Michael B
  • 1,660
  • 3
  • 28
  • 59
  • 1
    I've already tried this answer but in a css stylesheet linked to an angular component where the header part is. The style wasn't applied to the icons because of that, angular component applies style only to the template linked to it. Thank you for your response, you showed me that it works with vanillia html/css and thanks to that I noticed that my mistake was related to angular. I've learned something ! – lemour_a Dec 24 '16 at 13:55
  • Thank you for your feedback! – Michael B Dec 27 '16 at 09:24