Icon API

Component status:: stable

Import

import { Icon } from "@stratakit/mui";

Icon.Icon

Base element: <svg>

Icon component that provides fill and sizing to the SVGs from @stratakit/icons.

const arrowIcon = new URL("@stratakit/icons/arrow.svg", import.meta.url).href;
<Icon href={arrowIcon} />

The href can point to a specific symbol (e.g. #icon, #icon-large) within the SVG file:

<Icon href={`${arrowIcon}#icon-large`} />

It also accepts a custom SVG, via the render prop:

<Icon render={<svg><path d="…" fill="currentColor" /></svg>} />

By default, this component assumes that the icon is decorative, so it adds aria-hidden by default.

If the icon is semantically meaningful, the alt prop can be used to provide alternative text.

<Icon href={…} alt="Help" />

alt

Type: string | undefined (optional)

Alternative text describing the icon.

When this prop is passed, the SVG gets rendered as role="img" and labelled using the provided text.

This prop is not required if the icon is purely decorative. By default, the icon will be hidden from the accessibility tree.

href

Type: string | undefined (optional)

URL of the .svg file (e.g. from @stratakit/icons).

The URL can contain a hash pointing to a specific symbol within the SVG (e.g. #icon, #icon-large). By default, the #icon symbol is used if no hash is provided.

Note: The .svg must be an external HTTP resource for it to be processed by the <use> element. As a fallback, JS will be used to fetch the SVG from non-supported URLs; the fetched SVG content will be sanitized using the unstable_htmlSanitizer function passed to <Root>.

size

Type: "regular" | "large" | undefined (optional)

Size of the icon. This only affects the icon’s physical dimensions (not the SVG contents).

Defaults to "regular" (16px) and can be optionally set to "large" (24px).

Additional props

render