MDL Icons off-center

Question

I have icons that fit perfectly, but sometimes, my icons are off center and get 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>

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.

Thanks for your helpful answers

Edit:

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

After some testing, can confirm that the issue is a problem with the code

score 0 · Answer 1 · answered Jul 02 '16 at 05:11

0

CSS vertical-align can fix this. Just add a class to the material-icons element and apply vertical-align: 15%; to start. Change that number until you get what you want.

answered Jul 02 '16 at 05:11

Ronnie Royston

16,778
6
77
91

Thanks for your answer, but after applying that it does not change position at all! I also tried to change the button element but with no affect. Please let me know if you think of anything else – Script Kitty Jul 02 '16 at 21:11
more_vert then in CSS say .align { vertical-align: 25%;} ...or 15% or -15% until you get it. – Ronnie Royston Jul 03 '16 at 00:06
yeah that's what I did, unfortunately I didn't see it change? – Script Kitty Jul 03 '16 at 14:22

MDL Icons off-center

1 Answers1