MDL Icons off-center
<p>I have icons that fit perfectly, but sometimes, my icons are off center and get cutoff:</p>

<p><a href="https://i.stack.imgur.com/G9Ac5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G9Ac5.jpg" alt="enter image description here"></a></p>

<pre><code>&lt;button hidden id="sign-up-float-icon" class="floater mdl-button mdl-js-button mdl-button--icon"&gt;
      &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
    &lt;/button&gt;

    &lt;ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="sign-up-float-icon"&gt;
      &lt;li class="mdl-menu__item" id="sign-up-email"&gt;
        Register with Email
      &lt;/li&gt;
      &lt;li class="mdl-menu__item" id="sign-in-google"&gt;
        Login with Google
      &lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>The face icon looks good. The right most 'options' icon looks cutoff. When I click the button, it works fine, it just doesn't look right. What's going on? I tried reading mdl components doc and SO but still could not find out the solution.</p>

<p>Thanks for your helpful answers</p>

<p>Edit:</p>

<p>I've included what the elements look like. As you can see, the button is aligned but the image is risen slightly.</p>

<p><a href="https://i.stack.imgur.com/un5GI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/un5GI.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/jf589.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jf589.png" alt="enter image description here"></a></p>

<p>After some testing, can confirm that the issue is a problem with the code</p>