The shape
Everything resolves to a WrIconDef — { name: string, data: string } where data is a full <svg>…</svg> string. Register one or more via provideWrIcons(...) and reference by name from any <wr-icon> instance.
import { provideWrIcons } from 'ngwr/icon';
// Each provider call adds icons to the registry. Mix and match across
// sets — every `<wr-icon name="…">` then resolves against this set.
bootstrapApplication(AppComponent, {
providers: [
provideWrIcons([/* WrIconDef[] from one of the patterns below */]),
],
});Pattern 1 — svgIcon() for raw SVG files
The default path. Bundle the SVG as a string via your bundler's raw import, hand it to svgIcon(). Works with every set that ships SVG files — Tabler, Phosphor, Heroicons, Iconoir, Radix, Bootstrap, and any random icons your designer hands you.
// Generic — works with any source that ships full <svg> files.
// Pair with a bundler's raw-svg import (Vite: `?raw`, Webpack:
// `raw-loader`, esbuild: `--loader:.svg=text`).
import { svgIcon, provideWrIcons } from 'ngwr/icon';
import plusSvg from '@tabler/icons/icons/plus.svg?raw';
provideWrIcons([svgIcon('plus', plusSvg)]);Pattern 2 — Lucide adapter
Lucide doesn't ship SVG files — it exports per-icon IconNode tuples. The ngwr/icon/adapters/lucide adapter renders them into the same WrIconDef shape.
// Lucide ships per-icon JS exports (`IconNode` tuples).
import { Plus, Trash, ChevronDown } from 'lucide';
import { lucideIcons } from 'ngwr/icon/adapters/lucide';
provideWrIcons(lucideIcons({ plus: Plus, trash: Trash, 'chevron-down': ChevronDown }));Pattern 3 — Feather adapter
Feather ships inner-SVG strings only. The adapter wraps each with Feather's default <svg> chrome (24×24, currentColor, stroke 2).
// Feather ships inner-SVG strings under `dist/icons.json`.
// The adapter wraps each with Feather's default <svg> chrome.
import featherSource from 'feather-icons/dist/icons.json';
import { featherIcons } from 'ngwr/icon/adapters/feather';
provideWrIcons(featherIcons({ plus: featherSource.plus, trash: featherSource.trash }));Scaffold with the schematic
Faster path for the common case — let the CLI write the boilerplate.
# Scaffold an icon set with the schematic — generates a typed barrel
# under src/app/icons.ts that you import from your bootstrap.
ng g ngwr:icon-set basic