Vertical alignment

This tutorial is part of Iconify for Ember tutorial.

When an icon is rendered in text, by default it is aligned at baseline, as any other images.

Emojis and icon fonts are rendered slightly below baseline, like any text.

If you want to render icon in text, you probably want to add vertical-align to each icon to render it slightly below baseline, to make it fit in text, similar to emojis and icon fonts:

SVG in text:

SVG in text with vertical-align: -0.125em:

Inline attribute

Instead of adding vertical-align to each icon, icon component has a property inline. Adding inline property to icon component is identical to setting style="vertical-align: -0.125em":

Inline attribute demo:

hbs<p>
   Inline attribute demo:
   <IconifyIcon @icon='line-md:image-twotone' @inline={{true}} />
   <IconifyIcon @icon='mdi:account-box-outline' @inline={{true}} />
</p>

Important: this attribute does not change display mode for icon. It only adds vertical-align style.