MDL Icons nicht in der Mitte

Question

Ich habe Symbole, die perfekt passen, aber manchmal, meine Symbole sind aus der Mitte und erhalten Cutoff:

<button hidden id="sign-up-float-icon" class="floater mdl-button mdl-js-button mdl-button--icon"> 
     <i class="material-icons">more_vert</i> 
    </button> 

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

Das Gesicht Symbol sieht gut aus. Das rechte Symbol "Optionen" sieht abgeschnitten aus. Wenn ich auf den Knopf klicke, funktioniert es gut, es sieht einfach nicht richtig aus. Was ist los? Ich habe versucht, mdl Komponenten doc und SO zu lesen, konnte aber immer noch nicht die Lösung finden.

Vielen Dank für Ihre hilfreichen Antworten

Edit:

Ich habe enthalten, was die Elemente aussehen. Wie Sie sehen können, ist die Schaltfläche ausgerichtet, aber das Bild ist leicht angestiegen.

Nach einigen Tests können bestätigen, dass das Problem ein Problem mit dem Code ist

Answer 1

CSS vertical-align dieses Problem beheben kann. Fügen Sie einfach eine Klasse zum Element material-icons hinzu und wenden Sie zum Starten vertical-align: 15%; an. Ändern Sie diese Nummer, bis Sie bekommen, was Sie wollen.