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 */]),
],
});Icons
ngwr ships a registry-based icon system. Bring any icon set you like — install the upstream package separately, then wire icons via provideWrIcons(). The library bundles no upstream icons of its own.
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.
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 — Feather, 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/outline/plus.svg?raw';
import trashSvg from 'feather-icons/dist/icons/trash-2.svg?raw';
provideWrIcons([svgIcon('plus', plusSvg), svgIcon('trash', trashSvg)]);Pattern 2 — lucideIcons() for Lucide
Lucide doesn't ship SVG files — it exports per-icon IconNode tuples. Pass the ones you import to lucideIcons() from ngwr/icon, which renders them into the same WrIconDef shape.
// Lucide ships per-icon JS exports (`IconNode` tuples).
import { Plus, Trash, ChevronDown } from 'lucide';
import { lucideIcons, provideWrIcons } from 'ngwr/icon';
provideWrIcons(lucideIcons({ plus: Plus, trash: Trash, 'chevron-down': ChevronDown }));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