Align material icon vertically

Question

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.

Answer 1

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/

Answer 2

Try this

.material-icons {
    vertical-align: 1px; /*Change this to adjust the icon*/
}

Second option is you can use is:

.material-icons {
    position: relative;
    top: 1px; /*Change this to adjust the icon*/
}

What you are doing wrong

There is css rule for icon: font-size:24px which is greater than the parent anchor element and line height is 1 so resulting line height is 24px; that's why it was not working. If you want you can use your own code just change the line-height equal to parent anchor element and use vertical-align:middle for icon

See Js Fiddle

Answer 3

.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}