Icon

Displays an icon with optional text next to it using Tabler Icons.

Windstorm loads a custom set of smaller font files that make up the entirety of Tabler Icons. This means that the files we provide are not distributed by the Tabler team.

Attributes

data-icon

Use the data-icon attribute to set which icon is set (instead of a windstorm macro). Windstorm automagically scans the DOM for ws-icon elements and uses this attribute to determine which font file to load.

Preview

Example

<ws-flex>
    <div>
        <ws-icon data-icon="eggs"></ws-icon>
        <ws-icon data-icon="brand-twitch"></ws-icon>
    </div>
    <ws-icon data-icon="x">With some text</ws-icon>
    <ws-icon data-icon="hexagon" ws-x="[c @primary]">Add some color</ws-icon>
</ws-flex>