MDL在一个级别上对齐“li”文本和“i”图标

Question

我在<i class="material-icons mdl-color-text">person</i>内放置了图标，但文字未与图标对齐。

<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
    <li class="mdl-menu__item"><i class="material-icons mdl-color-text">person</i>About</li>
</ul>

材质css类中是否有可以修复它的构建？