Variants

Variant
  		Result
  		No JS needed
  		Fast
  		DX
Easy to implement 		Beautifully
aligned, and flat 		Priority
if all variants are declared.
direct SVG: ✓ ✓ ✓ 1
--u1-ico-dir search ✓ ✓ 2
--u1-ico-font search ✓ ✓ ✓ 3
UTF-8 (🔍) beta: 🔍 ✓ ✓ ✓ ?

Tests

--u1-ico-dir, innerHTML search
--u1-ico-dir, icon-attribute, {icon}
--u1-ico-dir, icon-attribute, {icon_name}
--u1-ico-dir, icon-attribute, {icon} without ".svg" suffix
direct svg
--u1-ico-font search
--u1-ico-dir, local (#icon) search
--u1-ico-dir, external part (#icon) search star

Vertical alignement

Using [inline]

Vertical-align initial: star
Vertical-align baseline: star
Vertical-align middle: star
Vertical-align text-bottom: star
Vertical-align bottom: star

Not using [inline]

Vertical-align initial: star
Vertical-align baseline: star
Vertical-align middle: star
Vertical-align text-bottom: star
Vertical-align bottom: star