Materialize Design Hamburger Icon Not Displaying - css

Question

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.
The full code is further below, but this is the piece that is not working appropriately:
<i class="material-icons">menu</i>
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.
This is the entire nav/dropdown structure:
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<!-- Dropdown Structure -->
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<header>
<nav class="z-depth-2">
<div class="container">
<div class="nav-wrapper">
OppSim
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<!-- web view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<!-- mobile view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
Or maybe I should stick with golf.

Answer 1

To use icons in materalize you have to include this font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
as per their official documentation here