I just created a Materialize CSS navbar and I placed some icons to the text.
I tried to change the priority of the code but no luck.
<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>
The main problem is that the text is floating off the nav bar:
The icon is pushing out the content i see.
nav > div.nav-wrapper > div > ul > li > a {
display: flex;
}
This is a dirty fix hope it helps, maybe theres better css for it but this works, you can also add some margin to the icon maybe.
nav > div.nav-wrapper > div > ul > li > a > i {
margin-right: 10px;
}