Align material icon vertically : <p>I am trying to vertically align my "dropdown arrow" in a naviation menu.</p>

<p>I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all.
<a href="http://img02.imgland.net/jfCmDoW.png" rel="noreferrer">http://img02.imgland.net/jfCmDoW.png</a></p>

<p><strong>The HTML looks like this:</strong></p>

<pre><code>  &lt;li&gt;
    &lt;a href="#!" data-activates="dropdown1"&gt;English
      &lt;i class="material-icons"&gt;arrow_drop_down&lt;/i&gt;
    &lt;/a&gt;
  &lt;/li&gt;
</code></pre>

<p>I have created a JSFiddle which demonstrates the problem: <a href="https://jsfiddle.net/dbwaoLrh/" rel="noreferrer">https://jsfiddle.net/dbwaoLrh/</a></p>

<p>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.</p>
