1

I use Material Design Icons by Google in my app. At least two styles are needed at the moment: regular (filled) icons and the outlined ones. The problem is, these two styles do not align!

If you look at this output, the regular and outlined icons are positioned on different heights for no clear reason. By examining them in the inspector, you can see that the bounding boxes are indeed different (for the outlined icons they seem to be lower than needed).

.icon {
  vertical-align: middle;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>

Screenshot of the output

Is there a workaround which can be applied to .material-icons-outlined class once to ensure they are positioned properly everywhere?

margin-bottom: -1em works for basic cases, but the icons are used in lots of different contexts, and sometimes (e.g. when their parents need to shrink to their line-height) this solution fails.

Alternatively, is there a tool which can quickly fix the font and make its characters appear on the desired height?

UPDATE: This seems to be an issue only on my Windows 8.1. The icons are aligned on Windows 10. This is reproducible in any browser.

UPDATE(2): That said, there is clearly some difference between the two fonts. Outlined icons do not work (just display their names instead of icons) on older iOS versions, while the regular ones work perfectly.

interphx
  • 307
  • 1
  • 4
  • 19
  • seem aligned in the snippet? – Pete May 16 '19 at 15:04
  • @Pete Oops! Seems to only be reproducible on my PC (Windows 8.1). On Windows 10 they are aligned. – interphx May 16 '19 at 15:19
  • Perhaps need to upgrade - windows stopped mainstream support for 8.1 last year – Pete May 16 '19 at 15:20
  • @Pete Some of our users still have Windows 8 (or 8.1) installed. While it's not a huge fraction, it would be nice to make the website appear non-broken to them as well. – interphx May 16 '19 at 15:27

1 Answers1

0

You can use flex (or even grid) to center align them.

.icon-wrapper {
  display: flex;
  align-items: center;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<div class="icon-wrapper">
  <i class="icon material-icons">person</i>
  <i class="icon material-icons-outlined">person</i>
  <i class="icon material-icons">home</i>
  <i class="icon material-icons-outlined">home</i>
</div>
Chad Wimberly
  • 76
  • 4