Icon

Class: FxIcon · Tag: <fx-icon>

The <fx-icon> component is a reusable icon host for icon-font classes, SVG files, or custom markup. It can sit in any icon / start / end slot and inherits color and size from its parent unless overridden.

Installation

import '@salsafx/ui';

<fx-icon> does not ship an icon font. For class-based icons, load any stylesheet that exposes <i class="…"> glyphs in your app. SVG paths and inline <svg> need no extra font.

Font Awesome 6 Free (used in these docs and Storybook):

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>

Other icon fonts work the same way once you load their stylesheet (see Other icon fonts below).

Interactive preview of icon fonts, brands, and SVG files:

Bolt

Sun

Wind

Bell

Brand

MDI

SVG

<fx-icon icon="fa-solid fa-bolt" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-sun" color="#f59e0b"></fx-icon>
<fx-icon icon="fa-solid fa-wind" color="#22d3ee"></fx-icon>
<fx-icon icon="fa-regular fa-bell" color="#a78bfa"></fx-icon>
<fx-icon icon="fa-brands fa-github" color="#94a3b8"></fx-icon>
<fx-icon icon="mdi mdi-home" color="#84cc16"></fx-icon>
<fx-icon icon="/icons/gauge.svg"></fx-icon>

Basic Usage

Attribute icon

Set icon to an icon-font class list — the glyph is inserted automatically. If the value ends with .svg, the path is loaded as an image.

<fx-icon icon="fa-solid fa-bolt" size="xx-large" color="#38bdf8"></fx-icon>
<fx-icon icon="/icons/gauge.svg" size="xx-large"></fx-icon>

Other icon fonts

Any icon font with an <i class="…"> API works. Example with Material Design Icons — load the stylesheet, then pass the class list to icon:

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
/>

<fx-icon icon="mdi mdi-home" size="xx-large" color="#38bdf8"></fx-icon>

Sizes

Use a size token, or omit size to inherit from the parent.

x-small

small

medium

large

x-large

xx-large

<fx-icon icon="fa-solid fa-bolt" size="x-small" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-bolt" size="small" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-bolt" size="medium" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-bolt" size="large" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-bolt" size="x-large" color="#38bdf8"></fx-icon>
<fx-icon icon="fa-solid fa-bolt" size="xx-large" color="#38bdf8"></fx-icon>

Inherit from parent

Omit size and color to inherit from the surrounding context.

Inherits parent color and size

Larger parent context

<div style="color: #38bdf8; font-size: 1.25rem;">
    <fx-icon icon="fa-solid fa-wind"></fx-icon>
    <span>Inherits parent color and size</span>
</div>
<div style="color: #f59e0b; font-size: 2rem;">
    <fx-icon icon="fa-solid fa-sun"></fx-icon>
    <span>Larger parent context</span>
</div>
<div style="color: #10b981; font-size: 1.5rem;">
    <fx-icon>
        <i class="fa-solid fa-leaf"></i>
    </fx-icon>
</div>

In component slots

<fx-push-button
    label="Start"
    background-color="#06b6d4"
    shape="round"
    is-animated
>
    <fx-icon slot="icon" icon="fa-solid fa-play"></fx-icon>
</fx-push-button>

Manual content

Drop a full <svg> (or any icon markup) into the default slot. With fill="currentColor" / stroke="currentColor", the icon picks up color from the host or parent.

<fx-icon size="xx-large" color="#38bdf8">
    <svg
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="currentColor"
        aria-hidden="true"
    >
        <path d="M12 2a1 1 0 0 1 .9.55l2.1 4.26 4.7.68a1 1 0 0 1 .55 1.7l-3.4 3.32.8 4.68a1 1 0 0 1-1.45 1.05L12 16.77l-4.2 2.21a1 1 0 0 1-1.45-1.05l.8-4.68-3.4-3.32a1 1 0 0 1 .55-1.7l4.7-.68 2.1-4.26A1 1 0 0 1 12 2z" />
    </svg>
</fx-icon>
<fx-icon size="xx-large" color="#f59e0b">
    <svg
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
    >
        <circle cx="12" cy="12" r="9" />
        <path d="M12 12L16.5 8.5" />
        <circle cx="12" cy="12" r="1.25" fill="currentColor" stroke="none" />
    </svg>
</fx-icon>

API Reference

Properties

Property	Attribute	Type	Default	Description
`icon`	`icon`	`String`	`""`	Icon-font class list (e.g. `"fa-solid fa-bolt"`), or a path ending in `.svg`.
`size`	`size`	`String`	`""`	Optional size token (`x-small` … `xx-large`) or CSS length. Empty inherits from parent.
`color`	`color`	`String`	`""`	Optional color override (icon fonts / `currentColor` markup). Empty inherits from parent.

Slots

Name	Description
— (default)	Manual icon markup when `icon` is not used.

Object Hierarchy

classDiagram
    class FxElement
    class FxIcon
    FxElement <|-- FxIcon