Inline icons

This tutorial is part of Iconify for Svelte 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:
<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/mdi @iconify-icons/line-md
   import Icon from '@iconify/svelte';
   import imageTwotone from '@iconify-icons/line-md/image-twotone';
   import accountBoxOutline from '@iconify-icons/mdi/account-box-outline';
</script>

<p>
   Block:
   
<!--
   Adding class to first icon to trigger animations used by line-md icon set.
   SVG framework automatically adds classes based on icon prefix,
   but components do not because they handle raw icon data.
   -->

   <Icon icon=
{imageTwotone} class="iconify--line-md" />
   <Icon icon=
{accountBoxOutline} />
</p>
<p>
   Inline:
   <Icon icon=
{imageTwotone} class="iconify--line-md" inline={true} />
   <Icon icon=
{accountBoxOutline} inline={true} />
</p>
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:
<script>
   // npm install --save-dev @iconify/svelte @iconify-icons/mdi @iconify-icons/emojione-v1 @iconify-icons/uim
   import Icon from '@iconify/svelte';
   import homeIcon from '@iconify-icons/mdi/home';
   import birdIcon from '@iconify-icons/emojione-v1/bird';
   import sceneryIcon from '@iconify-icons/uim/scenery';
</script>

<p>
   Block:
   <Icon icon=
{homeIcon} />
   <Icon icon=
{birdIcon} inline={false} />
   <Icon icon=
{sceneryIcon} style="vertical-align: 0;" />
</p>
<p>
   Inline:
   <Icon icon=
{homeIcon} inline={true} />
   <Icon icon=
{birdIcon} inline={true} />
   <Icon icon=
{sceneryIcon} style="vertical-align: -0.125em;" />
</p>
Demo:

Block:

Inline: