cssiconsmaterializegoogle-material-icons

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

:example

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.

Solution

  • 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>