Material Icons - Vertical Align Doesn't work well alongside text

[msvayani]

Hi,

Material icons doesn't seems to vertical align themselves when placed alongside any text.

Issue:

I am using this code:

<p><i class="material-icons">&#xE8B5;</i> Open 7 Days</p>

Let me know if I am doing anything wrong.

I am using Bootstrap v 3.3.5.

[bs-thomas]

This sounds more like a CSS issue. Make sure the line-height are the same for both, and set the display to "inline" or "inline-block", and set "vertical-align: middle"

See if that works.

[chicagosky]

I had the same issue and was able to fix it by using the following CSS code

div.mdl-layout__drawer > nav.mdl-navigation > a.mdl-navigation__link {
    display: inline-flex;
    vertical-align: middle;
}

[shyndman]

@chicagosky has the right idea. Write CSS that works for your use case.

[sylvainar]

Solved it with :
.panel-heading > i{ vertical-align: middle !important; }

[nueverest]

I used the solution provided by @sylvainar, and still needed to add padding-bottom-3 since it still wasn't lining up.

.vertical-align-middle { 
    vertical-align: middle; 
}

.padding-bottom-3 {
    padding-bottom: 3px;
}

<i class="material-icons vertical-align-middle padding-bottom-3">chevron_left</i>
<div class="inline-block">Previous</div>    

Interestingly enough, I tried to put the adjacent text in a div and add padding to the div instead of the icon. Surprisingly, it added padding to both the icon and the div. That seems broken to me as the icon is outside of the div. I'm using Zurb Foundation 5.5.

<i class="material-icons vertical-align-middle">chevron_left</i>
<div class="inline-block padding-bottom-3">Previous</div>    

[Javid-Izadfar]

it's kinda crazy but in my experience, having vertical-align: bottom appears more center than anything.

[gharia]

Following worked for me:

<li class="collection-item valign-wrapper">
    <i class="material-icons small valign">pool</i>
        <span>Swimming Pool</span>                                                           
</li>

[FrancescoBorzi]

same problem here, for some reasons I solved using:

vertical-align: top;

[PankajPrakashh]

Anybody here could explain why vertical-align: bottom; worked for me instead of vertical-align: middle;. I am totally confused how it works.

[FrancescoBorzi]

Same here, sometimes it works with vertical-align: bottom / top / middle; I have no idea why.

Strange thing is that in those contexts I have no problems with font awesome

[kriskornel]

Hi, thanks. It worked for me vertical-align: middle;

[kbtz]

@chicagosky solution cover most scenarios

A general solution could be to always wrap your icons and text so they can be aligned using flexbox

<div class="valign-center">
  <span>My Text</span>
  <i class="material-icons">chevron_left</i>
</div>

.valign-center {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
}

Note that putting "My Text" inside another element is important as well.
This seems to work well for any line-height, no matter which one is bigger, the icon or the text.

You also can change align-items: center; to something else to achieve what you want:

(source: https://css-tricks.com/almanac/properties/a/align-items/)

[elliotwhitehead]

There's also another option for vertical-align called text-top which worked the best for me.

[jmc265]

So I've come across this problem quite a bit. I have created a generalised solution which seems to work for the material icons in a number of different situations:

.material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

[danielhaim1]

Neither solutions worked for me :-/

[dpassis]

<li class="valign-wrapper"><i class="material-icons">done</i>Text</li>

[simplethemes]

This "issue" appears to depend on how your baseline is set up. I usually rely on a 1em body font size with a 1.5 line-height, so this works best in my case:

i {
  // required
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-weight: normal;
  font-style: normal;
  font-size:inherit;
  line-height:inherit;
  vertical-align: top;
  display: inline-block;
  // resetters
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  // optimizers
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

[danielhaim1]

I'll give it a try @simplethemes

[zzseba78]

This fix the problem for me:
i.material-icons { vertical-align: middle !important; }

[thekage91]

@chicagosky thank you, your solution work perfectly!! I can relax my head instead of :D :D

http://imgur.com/Q3cUg29

[julioflima]

One more solution, copied at Google.

i.material-icons{
display: flex !important;
justify-content: center !important;
}

[clusteratlas]

.material-icons {
  vertical-align: middle !important;
  padding-bottom: 3px;
}

[sinedied]

While we can "fix" this issue using CSS, I still think that the icon-font baseline should be properly set, and that is a bug.
When using font-awesome or ionicons, icons have by default a proper baseline alignment and that's something related to the font, not the CSS.

[tushgraph]

Fixed by using below css
p i { font-size:2.1rem; display: inline-flex; vertical-align: middle;}

[dapojaja]

Material icon aligns well with text on desktop browsers but not with android webview on 4.4/5.1
<mat-toolbar> <button><mat-icon>menu</mat-icon></button> <span>Angular Wordpress App</span> </mat-toolbar>

fixed with
.mat-icon-button {
line-height: 0;
}

[yresultadmin]

fixed with:

i.material-icons {display: inline-flex; vertical-align: top; line-height: inherit;}

[ashyad]

This worked for me:<i class="material-icons left">

[jaymoh]

@jmc265 solution worked for me

[nacengineer]

For those coming to this at the 11th hour, i.e. future me, add a left or right to the element class, e.g. class="material-icons left", and it'll float properly.

[TZanke]

I do not have any "left" class. Can you explain whats inside this CSS Class?

[nacengineer]

My apologies. I thought you were using these in conjunction with materialize-css

…

On Mon, Oct 8, 2018 at 02:30 Tobias Zanke ***@***.***> wrote: I do not have any "left" class. Can you explain whats inside this CSS Class? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#206 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOsvBj8feUVIO5FoXPXa6Yq9KaFhCTZks5uiv8BgaJpZM4F28Eq> .

[fabpico]

vertical-align: sub; was my best choice.

[aesher9o1]

Worked for me

 position: absolute;
float: right; 

[LondonWebFactory]

it's kinda crazy but in my experience, having vertical-align: bottom appears more center than anything.

Many thanks. This worked for me.

.material-icons { vertical-align: bottom !important; }

[ghost]

I'm still very lost at how to fix, here is reproduction: https://codepen.io/theaemarie/pen/ROvajg?editors=1100
Seems to just be a problem w/themes.

EDIT: seems to just be a windows 7 problem :/
#922 (comment)

[qortex]

Just switch to Iconify (see #71, and https://iconify.design/) and forget about this nonsense forever :)
(best thing that happened to me!)

[progmars]

I'm voting for this one:

.material-icons.inline-valigned {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    height: auto;
    width: auto;
    margin-bottom: 0.15em;
}

While other solutions somewhat helped, still when I inspected it in Chrome, I saw that the font symbol is not exactly vertically centered with my other letters when testing with different font sizes.

The approach above worked acceptably fine with different font sizes of the text around the icon - the icon is always vertically centered, if that's what you want.

I created the additional style to avoid breaking Angular Material components that are using mat-icon and expecting it to be of default size and default alignment. So, for my own use cases I use <mat-icon class="inline-valigned">extension`.

em here is intentional instead of rem to give the margin fix offset relative to the font size of the nearest container, if any.

[k-funk]

This is embarrassingly bad.

Most of the solutions in here include a bunch of flexbox rules that are doing nothing, or require wrapping the icon in another div that will undo the alignment-flaw in the original font.

vertical-align: middle; sorta works, but it often shifts the position of the text next to it as well, and it's not perfectly aligned either. How is this library so popular when something so simple is broken out of the box?

🗑

[hanabira80]

<style>
    .txt_width_icon {
       font-size:0;
    }
    .material-icons {
        vertical-align:middle;
        margin:0 0.4rem; /* if you need space */
    }
    .icon_text {
        display:inline-block;
        vertical-align:middle;
        font-size:1.2rem; /* change by your design */
    }
</style>

<div class="txt_width_icon">
    <i class="material-icons"> keyboard_arrow_left </i>
    <div class="icon_txt">SUB MENU</div>
</div>

[harikru]

it's kinda crazy but in my experience, having vertical-align: bottom appears more center than anything.

This worked! \m/

Thank you @Javid-Izadfar....

[debutifyaccounts]

[SOLUTION] - I just switched from font-awesome, this fixes the vertical issue perfectly, simply apply this styling to your icons

font-size: inherit;
vertical-align: bottom;
line-height: inherit;

[jahidulhub]

.container display:flex
align-items:center
i(icon tag) display:block
And this work for me finally.

[HTD]

Geez, people! It's obviously something terribly wrong here if completely different and contradicting solutions work in different cases!

All kinds of vertical-align reportedly work. I tell you what: it all depends on the font-size, and this is clearly wrong! It shouldn't depend on the font-size. If it does, there is a bug in the font.

Of course it can be worked around with a CSS fix for each icon size, but this is going to break anyway.

I fixed all icons alignments in my app, changed DPI setting on my OS settings and it broke immediately. I expect it will look different and wrong on different devices, depending on resolution, DPI settings and god knows what else. This is exactly opposite to what I as user wanted to achieve: I wanted QUICK and EASY way to get app icons, that will work on may devices and display settings. I already lost a couple of days on fighting with the CSS, ending up with getting rid of that icon pack, because despite the very professional look - the vertical alignment of said icons just CANNOT be done right. I also aim at minimalistic CSS, and ended up with HUGE CSS fixing the icons in countless places. That does it, material icons as web font are broken.

[blackfatpig]

In my case, I changed my CSS like:
.my-button
{
display: inline-grid;
vertical-align: middle;
text-align: center;
align-items: center;
}
Hope this help.

[entrifis]

Depends on the size of the mat-icon. Inspect the height of the mat-icon, then add a line-height equal to it

{
display: inline-flex;
vertical-align: middle;
line-height:
}

[grgsolymosi]

For whom, who tried everything, but didn't work any of the top solution as at my side, give a try to:
float: left,
font-size: 3.0em,
margin-top: -0.1em,
Of course you can play with the values.

[paulghodgson]

This is a deal breaker for me, I really don't want to fight my fonts every time I use them not sure why this is closed.

[opedroaravena]

Solved it with :
.panel-heading > i{ vertical-align: middle !important; }

THIS WORKED FOR ME.

[HTD]

This is a deal breaker for me, I really don't want to fight my fonts every time I use them not sure why this is closed.

Well, if you don't need many sizes in the app, or not many versions (mobile, desktop, etc) - they are still usable. But I agree - when they are a couple of sizes - the problem with vertical alignment is too much working around. There were many regular text web fonts that I was unable to use for the same reason. Original system fonts have no problem with vertical alignment, it just works in every browser, any text size and DPI settings, some of them get this wrong and it breaks.

[jscottPTC]

This is embarrassingly bad.

Most of the solutions in here include a bunch of flexbox rules that are doing nothing, or require wrapping the icon in another div that will undo the alignment-flaw in the original font.

vertical-align: middle; sorta works, but it often shifts the position of the text next to it as well, and it's not perfectly aligned either. How is this library so popular when something so simple is broken out of the box?

🗑

Yeah Angular is a pretty good framework. But I quite often run into small but infuriating issues like this. It happens enough to make me refer to Angular as a 'good but certainly not great' framework.

[xtance]

To anyone visiting this in future:
Just use emojis, they align perfectly and built-in on most platforms
On windows, you can press Win+Ю (period button) and select them there

[nacengineer]

Emojis don't always support screen readers in the way you intend. They have alt codes but typically these do not align with the way we use them. They have their use but in accessible web design the span approach is preferred because you can easily disable in aria. Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: xtance ***@***.***> Sent: Saturday, January 15, 2022 9:51:56 AM To: google/material-design-icons ***@***.***> Cc: Dave Southard ***@***.***>; Comment ***@***.***> Subject: Re: [google/material-design-icons] Material Icons - Vertical Align Doesn't work well alongside text (#206) To anyone visiting in this future: Just use emojis, they align perfectly and built-in on most platforms On windows, you can press Win+Ю (period button) and select them there — Reply to this email directly, view it on GitHub<#206 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAB2ZPBVUSASBT32XRPJXSLUWGJZZANCNFSM4BO3YEVA>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

[LanVukusic]

I solved it with a wrapper around. am not sure if it's correct:

<Box
  display="inline-flex"
  alignItems="center"
  justifyContent="center"
>
  <PushPinOutlined
    sx={{
      fontSize: '16px',
    }}
  />
</Box>

It works tho