Что-то не так со стилем navbar

Question

Я только что создал панель навигации Materialize CSS и поместил несколько значков в текст.

Я пытался изменить приоритет кода, но безуспешно.

<div class="navbar-fixed">
   <nav>
     <div class="nav-wrapper grey darken-4">
       <a href="#!" class="brand-logo"><img src="logo.png" width="315" height="70"></a>
       <ul class="right hide-on-med-and-down">
         <li><a href="#"><i class="small material-icons">home</i>Homepage</a></li>
         <li><a href="#"><i class="small material-icons">store</i>Marketplace</a></li>
       </ul>
     </div>
   </nav>
 </div>

Основная проблема заключается в том, что текст перемещается с панели навигации:

https://i.gyazo.com/2130fead13cc9e03e8133b8a7466e9b2.png

Answer 1

Значок выталкивает содержимое, которое я вижу.

nav > div.nav-wrapper > div > ul > li > a {
    display: flex;
}

Это грязное исправление, надеюсь, оно поможет, может быть, для этого лучше css, но это работает, вы также можете добавить немного поля на иконку.

nav > div.nav-wrapper > div > ul > li > a > i {
    margin-right: 10px;
}