hamburger icon is not showing up even if I call componentHandler.upgradeDom();

Question

<header class="mdl-layout__header">
    <div class="mdl-layout__header-row">

        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link is-active" href="/">link</a>
            <a class="mdl-navigation__link is-active" href="/">link</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link is-active" href="/">link</a>
        <a class="mdl-navigation__link is-active" href="/">link</a>
    </nav>
</div>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
</button>

According to http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ it should work as long as I call componentHandler.upgradeDom() after I dynamically load the html. Just to make sure I'm calling the upgradeDom correct I added the button to see if the ripple effect is added. And the button is updated but the hamburger icon is not appearing.

If I inline the html the hamburger icon appears.

Answer 1

Since you are dynamically load the html, you should run the following inside your init function after the DOM is load. Notice that the setInterval function to ensure DOM has enough time to load before executing the componentHandler method

jQuery

 $(document).ready(function() {
      setInterval(function() {
           componentHandler.upgradeAllRegisteredElements();
      }, 1000);
 });

DOM API

 document.addEventListener('DOMContentLoaded', function() {
      setInterval(function() {
           componentHandler.upgradeAllRegisteredElements();
      }, 1000);
 });