I had the same issue for the longest time but found a solution that worked for me. First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don't specify icon size in the icon classname. Let me know if this works for you.
CSS:
.inline-icon {
vertical-align: bottom;
font-size: 18px !important;
}
HTML:
<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…