ngx-iconify-stack
A lightweight, SSR-safe Angular wrapper for Iconify — 200,000+ icons from 150+ icon sets, driven by signals and zero runtime overhead.
How It Works
ngx-iconify-stack intelligently combines offline icon subsetting with SSR-safe rendering — giving you the best of both worlds.
Icon Subsetting
Build time scans your templates and generates a subset of only the icons you actually use. No bloat, only essentials.
SSR Ready
Icons render as inline SVG on the server. Zero flicker, no hydration mismatches, instant paint on client.
Smart Fallback
Icons outside the subset resolve through the Iconify CDN. Use 200,000+ icons without shipping them all.
Why ngx-iconify-stack?
Signal-Driven Reactivity
Built with Angular signals for maximum performance and zoneless app support.
Zero Runtime Overhead
Minimal bundle impact with standalone component architecture.
Auto-Subsetting Schematic
One CLI command to generate your icon subset — baked into your build pipeline.
200,000+ Icons
Access 150+ icon sets. Ship what you need, fallback to the CDN for the rest.
Interactive Sandbox
Test any Iconify icon dynamically. Customize size, color, rendering modes, and get copy-paste ready Angular code.
<ngx-iconify icon="devicon:angular" [size]="48" color="#6200f5" />API Reference
Everything you need to configure <ngx-iconify> components.
| Input | Type | Required | Default | Description |
|---|---|---|---|---|
icon | string | required | — | Iconify icon identifier, e.g. "mdi:home" or "lucide:arrow-right". |
size | number | optional | — | Convenience input — sets both width and height via font-size. |
width | number | string | optional | — | Explicit width in pixels. Overrides size. |
height | number | string | optional | — | Explicit height in pixels. Overrides size. |
color | string | optional | — | CSS color value for the icon (e.g. "#fff", "var(--color-accent)"). |
mode | 'svg' | 'bg' | 'mask' | 'style' | optional | — | Rendering mode passed to the iconify-icon web component. |
inline | boolean | optional | false | Renders inline — aligns icon to text baseline. |
noObserver | boolean | optional | false | Disables intersection observer; icon loads immediately. |
Usage Examples
<!-- Basic usage -->
<ngx-iconify icon="mdi:home" />
<!-- With size -->
<ngx-iconify icon="mdi:heart" [size]="32" />
<!-- With color -->
<ngx-iconify icon="mdi:star" [size]="24" color="#f59e0b" />