Inline vs block

This article is for outdated Iconify SVG Framework version 1.0.

Documentation for the latest version is available here.

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:
<p>
   Block:
   <iconify-icon data-icon="line-md:image-twotone"></iconify-icon>
   <iconify-icon data-icon="mdi:account-box-outline"></iconify-icon>
</p>
<p>
   Inline:
   <span class="iconify" data-icon="line-md:image-twotone"></span>
   <i class="iconify" data-icon="mdi:account-box-outline"></i>
</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

Any element other than <iconify-icon> is treated as inline icon, <iconify-icon> is treated as block icon.

You can change that behaviour by adding data-inline attribute:

HTML:
<p>
   Block:
   <span class="iconify" data-icon="mdi:home" data-inline="false"></span>
   <i class="iconify" data-icon="emojione-v1:bird" data-inline="false"></i>
   <iconify-icon data-icon="uim:scenery" data-inline="false"></iconify-icon>
</p>
<p>
   Inline:
   <span class="iconify" data-icon="mdi:home" data-inline="true"></span>
   <i class="iconify" data-icon="emojione-v1:bird" data-inline="true"></i>
   <iconify-icon data-icon="uim:scenery" data-inline="true"></iconify-icon>
</p>
Demo:

Block:

Inline:

Icons imported from fonts are special case. Sometimes they were designed with extra spacing below and above icon to perfectly fit into text. Those icons have different height in inline and block modes, so they might look a bit different. If you are migrating from font, use inline mode with those icons. Or better yet select different collection that was designed to be used as SVG, not as font.