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.
Interactive Sandbox
Test any Iconify icon dynamically. Customize size, rotation, rendering modes, and get copy-paste ready Angular code.
Configuration
Supports any icon from Iconify's database (200k+ icons).
Live Preview
Angular Usage
<ngx-iconify icon="devicon:angular" [size]="48" />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)"). |
flip | 'horizontal' | 'vertical' | 'both' | optional | — | Flip transformation applied to the icon. |
rotate | string | number | optional | — | Rotation: "90", "180", "270" or a degree value. |
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
HTML / TS
<!-- 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" />