Inline icons

This tutorial is part of Iconify for Vue 2 tutorial.

Icons have 2 modes: inline and block. Difference between modes is vertical-align that is added to inline icons.

Inline icons are aligned slightly below baseline, so they look centred compared to text, like glyph fonts.

Block icons do not have alignment, like images, which aligns them to baseline by default.

Alignment option was added to make icons look like continuation of text, behaving like glyph fonts. This should make migration from glyph fonts easier.

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

<script>

import { Icon } from '@iconify/vue2';

export default {
   components: {
       Icon,
   },
};
</script>
Stylesheet:
p {
   position: relative;
   font-size: 24px;
   line-height: 32px;
}

// Borders above and below text to highlight icon alignment
p:after,
p:before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   border-bottom: 1px dotted #ccc;
}
p:before {
   top: 6px;
}
p:after {
   bottom: 7px;
}
Demo:

Block:

Inline:

Syntax

By default, icon is treated as block icon. It has no custom vertical-align, so you can add it as necessary in a stylesheet.

You can change that behaviour by:

  • Adding inline attribute.
  • Adding vertical-align style with value -0.125em.

Example:

HTML:
<template>
   <div>
       <p>
           Block:
           <Icon icon="mdi:home" />
           <Icon icon="emojione-v1:bird" style="vertical-align: 0" />
           <Icon icon="uim:scenery" :inline="false" />
       </p>
       <p>
           Inline:
           <Icon icon="mdi:home" :inline="true" />
           <Icon icon="emojione-v1:bird" :style="{ verticalAlign: '-0.125em' }" />
           <Icon icon="uim:scenery" :inline="true" />
       </p>
   </div>
</template>

<script>

import { Icon } from '@iconify/vue2';

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

Block:

Inline: