# 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.

Source: https://ngwr.dev/icons/overview  
Kind: Reference

## 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.

```angular-ts
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.

```angular-ts
// 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.

```angular-ts
// 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).

```angular-ts
// 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.

```bash
# 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
```

## See also

- [wr-icon](https://ngwr.dev/reference/components/icon) — The renderer side — where a name registered here becomes an SVG on the page.
- [ng g ngwr:icon-set](https://ngwr.dev/start/schematics) — The generator side — let the CLI write the barrel instead of hand-listing icons.