Materialize icon positioning

Question

I have a side menu using Materialize CSS. It has three menu items in it, each with an icon. My problem is the icon sits too high - the base of the icon is in line with the base of the text. I want it to be so the icon is in the middle of the text vertically. Here is how my lis look:

<li class="logout-btn"><a href="#"><i class="material-icons">power_settings_new</i> Logout</a></li>

And here is what it looks like in the sidebar nav:

If anyone knows a fix that would be great!

Answer 1

Try with vertical align

 i.material-icons {
      vertical-align: middle;
 }

If this doesn't work, try to wrap into a span the text

<i class="material-icons">power_settings_new</i> <span>Logout</span>

And then in the CSS

 i.material-icons , i.material-icons + span {
      vertical-align: middle;
 }