物化设计汉堡图标不显示

我在我的rails应用程序中使用物化作为UI框架，除了“ material-icons”的“ menu”选项无法正常工作之外，其他所有功能均正常运行。

完整的代码在下面，但这是无法正常工作的部分：

  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

当我收缩浏览器以触发响应时，它没有显示为汉堡图标，而是显示了文本节点“菜单”。我不知道自己在做什么错。其他一切都在工作。

这是整个导航/下拉菜单结构：

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

  <!-- Dropdown Structure -->
  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">My Profile</a></li>
    <li><a href="#!">My Courses</a></li>
    <li class="divider"></li>
    <li><a href="#!">Logout</a></li>
  </ul>

  <header>
    <nav class="z-depth-2">
      <div class="container">
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo">OppSim</a>
          <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
          <ul class="right hide-on-med-and-down">
          <!-- web view -->
            <li><a href="#">Courses</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Login</a></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><a href="#">Courses</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Login</a></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>

也许我应该坚持打高尔夫球。