- 1.5.0

Icon Sprite

Renders an icon using an SVG sprite.

Read more Read less

Maturity: Refining

Usage

Render an icon with a visually hidden label:

<.icon_sprite name="arrow-left" label="Go back" />

To display the label visibly:

<.icon_sprite name="arrow-left" label="Go back" label_position="after" />
Default
Open in playground 
<.icon_sprite name="user" />
<.icon_sprite name="heart" />
<.icon_sprite name="settings" />
With text (ltr)
Open in playground
text after icon text before icon text hidden 
<.icon_sprite label="text after icon" name="user" label_position="after" />
<.icon_sprite label="text before icon" name="heart" label_position="before" />
<.icon_sprite label="text hidden" name="settings" label_position="hidden" />
With text (rtl)
Open in playground
متن بعد از نماد
متن قبل از نماد
متن مخفی 
<div dir="rtl">
  <.icon_sprite label="متن بعد از نماد" name="user" label_position="after" />
</div>

<div dir="rtl">
  <.icon_sprite label="متن قبل از نماد" name="heart" label_position="before" />
</div>

<div dir="rtl">
  <.icon_sprite label="متن مخفی" name="settings" label_position="hidden" />
</div>