Icon

<aparte-icon>

AparteIcon

The library’s icon set, reachable from MARKUP.

It existed only in JavaScript. Core ships 25 glyphs and setIconProvider is sold as the lever that swaps them, but the only door in was getIcon(name) — so a consumer writing plain HTML could not place one, and the icon provider could not reach a single icon that consumer wrote themselves. <aparte-composer-action>’s own documentation tells you to put an <svg> inside it, which is the same gap stated as an instruction.

That gap is why every example on the CSS-classes reference carried 265 characters of path data to demonstrate a 60-character class: there was no shorter way to say “an icon goes here” that actually drew one. <aparte-icon name="copy"> is that way.

It routes through getIcon, so it is not a second icon mechanism — it is a markup entrance to the one that exists. Register a provider and every <aparte-icon> on the page follows, including the ones in your own templates.

ONE CONSEQUENCE, stated because it is the real cost: the 25 glyph NAMES become public API. expand, copy, nextBranch were internal identifiers; renaming one now breaks a consumer’s markup.

It renders into itself and takes no children — whatever you put inside is replaced. The SVG is aria-hidden, because an icon beside a label is decoration; when the icon IS the button’s only content, name the BUTTON (aria-label), not this.

Usage

Width 375 768 Full Open in a tab

The real element, in its own document so this site's CSS cannot reach it. It renders the same example printed below — every framework mounts this same element, so the rendering is what you get in all five; the code is what changes.

Example

<aparte-icon name="copy"></aparte-icon>
<aparte-icon name="check" class="aparte-icon--lg"></aparte-icon>
<button class="aparte-btn aparte-btn--icon" aria-label="Copy">
  <aparte-icon name="copy"></aparte-icon>
</button>

API

Attributes

Attribute	Description
name	Which glyph to draw. One of the names setIconProvider accepts; an unknown name draws nothing rather than a broken-image box.

Theming

Override any of these on :root, on a subtree, or on one instance — custom properties inherit downward. Some are this element’s own; others are site-wide tokens that also style it, and overriding one of those at :root moves everything that reads it. The full set is in the CSS variables reference.

<aparte-icon>

Variable	Default	Description
--aparte-icon-size	calc(1rem * var(--aparte-font-scale))	Width and height. --sm/--lg/--xl set it.

In a framework

The element is the same object everywhere — the tag does not change. What changes is how an attribute is written and how an event reaches you.

Vanilla

<aparte-icon name="…"></aparte-icon>

React

<aparte-icon name="…"></aparte-icon>

The aparte-* tags are typed JSX intrinsics as soon as you import from @aparte/react.

Vue

<template>
  <aparte-icon name="…"></aparte-icon>
</template>

Declared through Vue’s GlobalComponents, so vue-tsc checks the tag in any template.

Svelte

<aparte-icon name="…"></aparte-icon>

Declared through SvelteHTMLElements, so svelte-check covers the attributes and the on: handlers.

Angular

import { AparteIconDirective } from '@aparte/angular';

<aparte-icon name="…"></aparte-icon>

A standalone directive whose selector IS the tag, so the real element sits in the template — @if, @for and content projection all reach it — and no CUSTOM_ELEMENTS_SCHEMA is needed.

Installation and the framework-specific traps: React · Vue · Svelte · Angular.