Search the Qalma docs

Type at least two characters to get started.

UI Kit

UI Kit

Icons

The kit renders every glyph through @ng-icons/core, which resolves icons by name. You register a name once with provideIcons(), and any kit control that references that name renders it — so replacing an icon means registering a different SVG under the same name.

Toolbar icons

provideQalmaToolbarIcons() registers the Lucide set used by the default command fragments (QALMA_TOOLBAR_*). Because registrations merge and the last one wins, you override a single glyph by adding your own provideIcons() after it — no need to fork the toolbar. The icon field on QalmaToolbarButton and ToolbarCommandItem is just a registered name, so a custom name works the same way.

Overriding and adding icons

lucideBold is remapped to an app SVG; appUnderline is a brand-new name — both render through the same toolbar button.

QalmaSlashCommandMenu renders each option's icon field the same way. The menu ships the default Lucide icons for first-party block commands, so those work out of the box; register any additional names you reference (custom commands, brand glyphs) with your own provideIcons() at or above the menu.

Built-in component icons

The drag-handle action menu and the slash menu's first-party defaults register their icons internally, so they render with no setup. Today there is no per-icon input to swap those built-in glyphs from outside the component. If you need fully custom block chrome, compose it from the primitives (anchorToRect, flipAbovePlacement, DismissibleOverlay, KeyboardNavigableList) and render your own icons — the same headless-first path the kit itself uses.