Comment centrer aligner une ICÔNE à l'intérieur d'un BOUTON dans Materialise css navbar?

J'ai lu de nombreux articles sur SO sur la façon d'aligner au centre une ICÔNE à l'intérieur d'un BOUTON, mais aucun d'entre eux ne fonctionne pour mon cas, car dans mon cas, le BOUTON est à l'intérieur d'une barre de navigation.

Veuillez consulter le code dans jsfiddle , également collé dans le bloc de code ci-dessous.

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


        <div class="navbar-fixed">
          <nav class="teal">
            <div class="container">
              <div class="nav-wrapper">
                <a href="#" class="brand-logo">LOGO </a>
                <ul class="right hide-on-med-and-down">
                  <li>
                    <form class="orange" style="">
                      <div style="display: inline-flex; border: 1px black solid; align-items: center;">
                        <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
                        <button class="btn" type="submit" style="background: blue; height:45px;">
                          <i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;">search</i>
                        </button>
                      </div>
                    </form>
                  </li>
                  <li>
                    <a href="#home">Home</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>

Le problème est que, l'ICÔNE de recherche n'est pas centrée verticalement à l'intérieur de BUTTON, et j'ai essayé de nombreuses méthodes suggérées, aucune n'a fonctionné.

Veuillez aider!