56

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.

1
  • The problem is that baselines are wrong in the font file. All answers here are hacks. Of course baseline align (default for inline box model, enabled with align-items: baseline for flexbox) should be the answer, if the icons in the font would be baseline-aligned as they should. Maybe someone should file a bug.
    – capr
    Jan 11 at 23:12

9 Answers 9

59

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

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
  • 1
    The following worked for me as vertical-align: top didn't solve my problems: .material-icons { display: inline-flex; vertical-align: text-bottom; } Aug 20, 2020 at 22:52
  • Amazing, line-height is something I wouldn't know how to find myself!
    – milcak
    Apr 11, 2021 at 18:09
15

Simply adjust the vertical-align: into negative value.

sample code:

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

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 {
    display:inline-flex;
    vertical-align:top;
}
0
5

Place it in a .valign-wrapper like this:

<span class="valign-wrapper"><i class="grey-text material-icons">play_arrow</i>&nbsp 1 Sep 2020</span>
<span class="valign-wrapper"><i class="grey-text material-icons">stop</i>&nbsp 30 Jul 2021</span> 
3
  • 1
    This solution worked for me. It seems like it lets material do the work (as intended).
    – leekei
    Aug 26, 2020 at 10:45
  • 2
    This should be the correct answer. Ref: materializecss.com/helpers.html
    – Bossman
    Sep 17, 2020 at 10:14
  • i tried the accepted answer from 2016 with the verticle-align: top as well as the answers for making it the bottom or a negative number from 2018 and 2019 and none of those worked with a newer version of material. This answer is the only one that worked for newer versions of material. Nov 17, 2022 at 19:22
3

Putting here as an answer as Pedro Muñoz's comment worked for me.

.material-icons { display: inline-flex; vertical-align: text-bottom; }
2

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

This css works for me. It's basically reset the font size and line height, then align it to the bottom of baseline..

.material-icons {
  font-size: inherit;
  line-height: inherit;
  vertical-align: bottom;
}
1

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.

3
  • 2
    Run the snippet and you'll see the icon is not properly aligned, it's bigger and with a taller baseline than the text.
    – MucaP
    Feb 12, 2019 at 20:05
  • I just gave snippet for right side alignment with inbuilt class available in materialize instead customize it. codepen.io/bvinothraj/pen/xMaPoR Check this url, where you can see login button with right side aligned image without any other extra css coding. you have to get it with right parent tags.
    – VIRA
    Feb 14, 2019 at 10:36
  • *in the previous comment, instead login, just have a look in the "ID" in the menu.
    – VIRA
    Feb 14, 2019 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.