Align material icon with text on Materialize

问题

Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it

:

I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help. Thank you.

回答1:

That's one way to do it. Of course it depends on the icon, you have to find the specific font-size that will fit the icon's height. Examples:

#txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

回答2:

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>

回答3:

Simply adjust the vertical-align: into negative value.

sample code:

<i class="material-icons" style="vertical-align: -6px;">folder</i>

回答4:

You may change the icon margin-top to any POSITIVE or NEGATIVE value to align it. For example,

<i class="material-icons" style="margin-top:-10px">info_outline</i>

回答5:

You can do the following in the HTML:

<span>ID</span> <i class="material-icons">info</i>

Then in the CSS, you can style material-icons class as follows:

.material-icons {
    diplay:inline-flex;
    vertical-align:top;
}

回答6:

Simple:

you can just coalesce an another class ("right") with it:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons right">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons right">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons right">stay_primary_landscape</i>

you can see word "right" in the material-icons class.

来源：https://stackoverflow.com/questions/39907145/align-material-icon-with-text-on-materialize