Vertical alignment

This tutorial is part of Iconify for Svelte tutorial.

When 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 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":

HTML:
<script>

    import Icon from '@iconify/svelte';

</script>

<p>

    Inline attribute demo:

    <Icon icon="line-md:image-twotone" inline={true} />

    <Icon icon="mdi:account-box-outline" inline={true} />

</p>

Demo:

Inline attribute demo:

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