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.
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 ♫♪♫
I have added the
i-tag from the material icons to your CSS. This is working fine. See snippet: