Inline vs block

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 centered 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.

Sample

Stylesheet:

p {
  position: relative;
  font-size: 24px;
  line-height: 32px;
}
p:after, p:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px dotted #ccc;
}
p:before {
  top: 6px;
}
p:after {
  bottom: 7px;
}

HTML:

<p>
  Block:
  <simple-svg data-icon="mdi-android"></simple-svg>
</p>
<p>
  Inline:
  <span class="simple-svg" data-icon="mdi-android"></span>
  <i class="simple-svg" data-icon="entypo-cake"></i>
</p>

Result:

Block:

Inline:

To see differences text is underlined at baseline and at similar distance above text.

Inline icon is centered so it looks like continuation of text. Block icon looks like image.

Syntax

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

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

<p>
  Block:
  <span class="simple-svg" data-icon="mdi-android" data-inline="false"></span>
  <i class="simple-svg" data-icon="noto-v1:woman-technologist" data-inline="false"></i>
  <simple-svg data-icon="entypo-cake" data-inline="false"></simple-svg>
</p>
<p>
  Inline:
  <span class="simple-svg" data-icon="mdi-android" data-inline="true"></span>
  <i class="simple-svg" data-icon="noto-v1:woman-technologist" data-inline="true"></i>
  <simple-svg data-icon="entypo-cake" data-inline="true"></simple-svg>
</p>

Result:

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.