I cannot find a way to change the hamburger box icon. Let the code do the talking:
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>
OUTPUT
After that, the icon will be added dynamically after the color is set to white:
When I change my color from my chrome console, everything is fine.
But if I try to use the css class, this will not work:
.mdl-layout__header .mdl-layout__drawer-button { color: #000 !important; }
MY QUESTION
Do I have any other solutions besides dynamically changing color through the DOM or directly messing with .min.js material?
(Failed to change color using javascript)
<script type="text/javascript"> document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red"; </script>
Thanks! ♫ ♪ Wish you a merry Christmas ♫ ♪ ♫
source share