Vertical alignment

This tutorial is part of Iconify for Vue 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, the icon component has a property inline. Adding inline property to the icon component is identical to setting style="vertical-align: -0.125em":

Inline attribute demo:

vue<template>
   <div>
       <p>
           Inline attribute demo:
           <Icon icon="line-md:image-twotone" :inline="true" />
           <Icon icon="mdi:account-box-outline" :inline="true" />
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


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