Vertically center material_icon in MaterializeCSS Navbar?

Question

I have a website I'm building with the help of Materialize, and when I put <i class="material-icons valign-center">settings</i> in a tab, it ends up looking like this:

And upon looking at the bounds for the icon, it seems that it goes past its enclosing tags, and is being centered in that spot, unlike the text in neighboring tags.

In Chrome:

In Firefox (the following will also be in Firefox):

What the other text looks like:

Text snippet for the navbar:

<nav class="nav-extended teal">
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="left">
            <li><a href="sass.html"><i class="material-icons">arrow_back</i></a></li>
        </ul>
        <a href="#" class="brand-logo"><i class="material-icons left" style="font-size: 1.5em;">access_time</i>
            Classy
            Clock</a>
        &nbsp;
        <ul class="tabs tabs-transparent">
            <li class="tab"><a class="active" href="#settings"><i class="material-icons valign-center">settings</i></a>
            </li>
            <li class="tab"><a href="#monday">Monday</a></li>
            <li class="tab"><a href="#tuesday">Tuesday</a></li>
            <li class="tab"><a href="#wednesday">Wednesday</a></li>
            <li class="tab"><a href="#thursday">Thursday</a></li>
            <li class="tab"><a href="#friday">Friday</a></li>
            <li class="tab"><a href="#saturday">Saturday</a></li>
            <li class="tab"><a href="#sunday">Sunday</a></li>
        </ul>
    </div>
</nav>

Answer 1

There seems to be some css conflicts when you put tabs in the nav. You can fix this with some custom css.

Codepen

nav .tab i.material-icons {
  height: 48px;
  line-height: 48px;
}