Materialize Design Hamburger Icon Not Displaying
<p>I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly. </p>

<p>The full code is further below, but this is the piece that is not working appropriately:</p>

<pre><code>  &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
</code></pre>

<p>Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.</p>

<p>This is the entire nav/dropdown structure:</p>

<pre><code>  &lt;!-- Dropdown Structure --&gt;
  &lt;ul id="dropdown1" class="dropdown-content"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Courses&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;!-- Dropdown Structure --&gt;
  &lt;ul id="dropdown2" class="dropdown-content"&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;My Courses&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#!"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

  &lt;header&gt;
    &lt;nav class="z-depth-2"&gt;
      &lt;div class="container"&gt;
        &lt;div class="nav-wrapper"&gt;
          &lt;a href="#!" class="brand-logo"&gt;OppSim&lt;/a&gt;
          &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="right hide-on-med-and-down"&gt;
          &lt;!-- web view --&gt;
            &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Signup&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;!-- Dropdown Trigger --&gt;
            &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="dropdown1"&gt;JTB&lt;i class="material-icons right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="side-nav" id="mobile-demo"&gt;
          &lt;!-- mobile view --&gt;
            &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Signup&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;!-- Dropdown Trigger --&gt;
            &lt;li&gt;&lt;a class="dropdown-button" href="#!" data-activates="dropdown2"&gt;JTB&lt;i class="material-icons right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
</code></pre>

<p>Or maybe I should stick with golf.</p>