如何使用materialize css将带图标的搜索框添加到导航栏？

<nav class="nav-wrapper">
  <div class="container">
    <a href="#" class="brand-logo">Logo</a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <!-- 导航栏菜单项 -->
    </ul>
  </div>
</nav>

<li>
  <div class="input-field">
    <input type="search" id="search" placeholder="Search">
    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
    <i class="material-icons">close</i>
  </div>
</li>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
  });
</script>