Align material icon vertically

Issue

I am trying to vertically align my "dropdown arrow" in a naviation menu.

I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all. http://img02.imgland.net/jfCmDoW.png

The HTML looks like this:

  <li>
    <a href="#!" data-activates="dropdown1">English
      <i class="material-icons">arrow_drop_down</i>
    </a>
  </li>

I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/dbwaoLrh/

Explanations of what I am doing wrong there are highly appreciated as I face this issue every time I am using "custom" font sizes using the materialize-framework.

Solution

You might have tried various styling to arrange your icons, but you need to target your icons i.e. i tag as below and style,

.footer-links > li > a > i{
  vertical-align:middle;
} 

Check this two jsFiddle, I have added background to one just for understanding purpose.

https://jsfiddle.net/dbwaoLrh/2/

https://jsfiddle.net/dbwaoLrh/4/

Answered By - frnt