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.

MucaP
  • 992
  • 1
  • 10
  • 18
  • 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 '23 at 23:12

9 Answers9

58

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>
darkknightsds
  • 530
  • 8
  • 16
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>
Theodore K.
  • 5,058
  • 4
  • 30
  • 46
  • 1
    The following worked for me as vertical-align: top didn't solve my problems: .material-icons { display: inline-flex; vertical-align: text-bottom; } – Pedro Muñoz Aug 20 '20 at 22:52
  • Amazing, line-height is something I wouldn't know how to find myself! – milcak Apr 11 '21 at 18:09
15

Simply adjust the vertical-align: into negative value.

sample code:

<i class="material-icons" style="vertical-align: -6px;">folder</i>
KirtJ
  • 550
  • 7
  • 7
12

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;
}
Mwiza
  • 7,780
  • 3
  • 46
  • 42
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>
Ahmed Zakaria
  • 51
  • 1
  • 1
  • 1
    This solution worked for me. It seems like it lets material do the work (as intended). – leekei Aug 26 '20 at 10:45
  • 2
    This should be the correct answer. Ref: https://materializecss.com/helpers.html – Bossman Sep 17 '20 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. – Keith E. Truesdell Nov 17 '22 at 19:22
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>
luke77
  • 2,255
  • 2
  • 18
  • 30
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.

VIRA
  • 1,454
  • 1
  • 16
  • 25
  • 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 '19 at 20:05
  • I just gave snippet for right side alignment with inbuilt class available in materialize instead customize it. https://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 '19 at 10:36
  • *in the previous comment, instead login, just have a look in the "ID" in the menu. – VIRA Feb 14 '19 at 10:43
1

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

.material-icons { display: inline-flex; vertical-align: text-bottom; }
Anonymous Creator
  • 2,968
  • 7
  • 31
  • 77
0

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;
}
Muhammad Syauqy
  • 401
  • 4
  • 7