How do I change icon colors dynamically with ngneat/svg-icon?

Set the color input on the component or use CSS classes; the SVG must have fill or stroke set to currentColor, and the library allows inheritance so changes to the component's style instantly update the icon. This enables themes or state-based coloring without extra assets.

Can I use ngneat/svg-icon with lazy-loaded routes in Angular?

Yes, register icons locally using provideSvgIcons in the providers array of lazy-loaded modules or routes, ensuring icons are only loaded when those sections are accessed. This helps keep bundle sizes small and improves initial load performance.

What's the difference between ngneat/svg-icon and Angular Material's MatIcon?

ngneat/svg-icon offers more direct CSS control and lazy loading for custom SVGs, while MatIcon is part of Angular Material and better suited if you're already using that UI framework with pre-styled icons. ngneat/svg-icon is more flexible for bespoke SVG management.

How to add new icons at runtime without restarting the app?

Inject SvgIconRegistry and use the register method, or use injectRegisterIcons with Angular's inject API, allowing dynamic icon addition. This is useful for fetching icons from APIs or user-generated content.

Does ngneat/svg-icon support icon fallbacks for missing keys?

Yes, configure a missingIconFallback in the SvgIconConfig via provideSvgIconsConfig to display a default icon when a requested key isn't found, improving user experience by avoiding broken icons.

Is there a way to group icons for better organization?

Yes, place icons in folders (e.g., notifications) and the svg-generator creates barrel files exporting them as arrays like notificationsIcons, which can be registered together for logical grouping and easier imports.

What performance pitfalls should I watch out for with this library?

Embedding many SVGs directly in the DOM can increase HTML size and memory usage, but the lazy loading and tree-shaking features mitigate this. Ensure icons are optimized via SVGO in the generator config to keep file sizes small.

@ngneat/svg-icon — Angular SVG Icon Library

What is @ngneat/svg-icon?

ngneat/svg-icon is an Angular library that provides an <svg-icon> component for directly rendering SVG icons in the DOM. It solves the problem of limited styling and animation capabilities when using traditional methods like <img> tags or CSS background images by allowing full CSS control over SVG properties such as fill and stroke.

Target Audience

Angular developers building applications that require customizable, performant SVG icons with dynamic styling and animation capabilities.

Value Proposition

Developers choose this library because it offers a lightweight, type-safe solution with direct DOM rendering for superior CSS styling, centralized icon management via a registry, and built-in support for lazy loading and tree-shaking to optimize bundle sizes.

👻 A lightweight library that makes it easier to use SVG icons in your Angular Application

Use Cases

Best For

Angular applications needing SVG icons that dynamically change color via CSS (e.g., using currentColor).
Projects requiring centralized management and registration of SVG icons across modules with lazy loading support.
Teams building design systems in Angular where consistent icon sizing and styling are critical.
Applications that need to optimize bundle sizes by loading icons only in specific lazy-loaded modules or routes.
Developers looking for a type-safe, tree-shakeable SVG icon solution integrated with Angular's standalone components.
Scenarios where fallback icons are required for missing or unregistered SVG assets.

Not Ideal For

Projects using frameworks other than Angular, such as React or Vue.js, where this library's Angular-specific APIs and dependency injection won't integrate.
Applications with only a handful of static icons that don't require dynamic styling or animation, as the setup overhead outweighs the benefits.
Teams preferring minimal tooling who want to avoid build-time icon preprocessing with @ngneat/svg-generator and its configuration.
Scenarios where icons are managed externally via a CDN or design system tool that provides pre-built components, reducing the need for internal registry management.

Pros & Cons

Pros

Direct CSS Control

Embeds SVG directly in the DOM, allowing properties like fill to inherit CSS styles such as color, enabling dynamic styling and animation without modifying SVG files, as highlighted in the README's emphasis on currentColor.

Centralized Icon Management

Uses SvgIconRegistry for registering and retrieving icons, supporting dynamic addition and lazy loading per module or route, which optimizes bundle sizes and simplifies icon updates across the application.

Optimized Bundle Sizes

Supports lazy loading icons in specific modules via provideSvgIcons, and the svg-generator tool ensures only used icons are processed, aiding tree-shaking for performance, as noted in the lazy loading and grouping sections.

Flexible Sizing Options

Provides predefined size presets (e.g., xs, sm) and customizable dimensions through inputs like fontSize, width, and height, allowing consistent icon scaling based on CSS font-size principles.

Cons

Build-Time Complexity

Requires setup of @ngneat/svg-generator with configuration in package.json, adding an extra npm script step that must run before builds, which can be cumbersome for simple projects or teams unfamiliar with such tools.

Angular-Only Lock-in

Tightly integrated with Angular's dependency injection and standalone components, making migration to other frameworks difficult without significant rewrites to icon handling logic.

Configuration Overhead

The svg-generator uses Cosmiconfig for custom config files, and misconfigurations can lead to issues with icon extraction or SVGO plugins, adding a learning curve beyond basic usage.

Frequently Asked Questions

What is @ngneat/svg-icon?

Target Audience

Angular developers building applications that require customizable, performant SVG icons with dynamic styling and animation capabilities.

Value Proposition

Use Cases

Best For

Angular applications needing SVG icons that dynamically change color via CSS (e.g., using currentColor).
Projects requiring centralized management and registration of SVG icons across modules with lazy loading support.
Teams building design systems in Angular where consistent icon sizing and styling are critical.
Applications that need to optimize bundle sizes by loading icons only in specific lazy-loaded modules or routes.
Developers looking for a type-safe, tree-shakeable SVG icon solution integrated with Angular's standalone components.
Scenarios where fallback icons are required for missing or unregistered SVG assets.

Not Ideal For

Projects using frameworks other than Angular, such as React or Vue.js, where this library's Angular-specific APIs and dependency injection won't integrate.
Applications with only a handful of static icons that don't require dynamic styling or animation, as the setup overhead outweighs the benefits.
Teams preferring minimal tooling who want to avoid build-time icon preprocessing with @ngneat/svg-generator and its configuration.
Scenarios where icons are managed externally via a CDN or design system tool that provides pre-built components, reducing the need for internal registry management.

Pros & Cons

Pros

Direct CSS Control

Centralized Icon Management

Optimized Bundle Sizes

Flexible Sizing Options

Provides predefined size presets (e.g., xs, sm) and customizable dimensions through inputs like fontSize, width, and height, allowing consistent icon scaling based on CSS font-size principles.

Cons

Build-Time Complexity

Angular-Only Lock-in

Tightly integrated with Angular's dependency injection and standalone components, making migration to other frameworks difficult without significant rewrites to icon handling logic.

Configuration Overhead

The svg-generator uses Cosmiconfig for custom config files, and misconfigurations can lead to issues with icon extraction or SVGO plugins, adding a learning curve beyond basic usage.

Frequently Asked Questions

@ngneat/svg-icon

What is @ngneat/svg-icon?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

@ngneat/svg-icon

What is @ngneat/svg-icon?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?