Icon

<oblyx-icon> renders one glyph from Oblyx's semantic icon set as inline SVG. There is no network request and no external icon font: the markup is self-contained, so an icon is visible the instant the element upgrades.

<oblyx-icon name="close"></oblyx-icon>

oblyxIcon(name = OblyxIconName.CLOSE)

Naming

name is a closed set of camelCase semantic names, listed in full in the reference table below. The full glyph gallery, rendered one by one, lives on the foundations icons page; this page covers how to use the component, not which icon looks like what. In Kotlin, each name is a OblyxIconName enum constant in SCREAMING_SNAKE_CASE with word boundaries at each camelCase hump, so chevronDown becomes OblyxIconName.CHEVRON_DOWN.

Sizing and color

The icon has no size or color attribute of its own. It sizes itself to 1em and fills or strokes with currentColor, so a consumer controls both the same way it would for a piece of text: set font-size to resize it, and color to recolor it.

<oblyx-icon name="warning" style="font-size: 1.5rem; color: var(--ox-color-text-warning);"></oblyx-icon>
<oblyx-icon name="warning" style="font-size: 2.5rem; color: var(--ox-color-text-danger);"></oblyx-icon>

oblyxIcon(name = OblyxIconName.WARNING) {
  style = "font-size: 1.5rem; color: var(--ox-color-text-warning);"
}
oblyxIcon(name = OblyxIconName.WARNING) {
  style = "font-size: 2.5rem; color: var(--ox-color-text-danger);"
}

Decorative icons and the label attribute

An icon is decorative by default: it renders with aria-hidden and contributes nothing to the accessible name of the page. This is the right default next to visible text, such as inside a button that already has a label.

<oblyx-button variant="secondary">
  <oblyx-icon name="externalLink"></oblyx-icon>
  Open in new tab
</oblyx-button>

oblyxButton(variant = OblyxButtonVariant.SECONDARY) {
  oblyxIcon(name = OblyxIconName.EXTERNAL_LINK)
  +"Open in new tab"
}

Set label when the icon is the only content conveying meaning, such as inside an icon-only button. This switches the icon to role="img" with that string as its accessible name.

<oblyx-button icon-only label="Close">
  <oblyx-icon name="close" label="Close"></oblyx-icon>
</oblyx-button>

oblyxButton(iconOnly = true, label = "Close") {
  oblyxIcon(name = OblyxIconName.CLOSE, label = "Close")
}

Unknown names fail visibly

Passing a name the registry doesn't recognize does not render nothing. It renders a dashed placeholder box with a question mark, and logs a console error naming the bad value and listing every known name. This is deliberate: a silently blank icon is a worse failure than an obviously wrong one.

<oblyx-icon name="rocket"></oblyx-icon>

// Not expressible: OblyxIconName has no ROCKET constant.
// This example passes a raw string outside the Kotlin type to show the
// runtime fallback; a real Kotlin caller can't produce an unknown name.
oblyxIcon { attributes["name"] = "rocket" }

Reference