How to Build an Angular SVG Icon Module

Build a shared Angular icon module that renders SVG icons consistently with size and color inputs.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Creating a Reusable Icon Component

Build an IconComponent with an @Input() for the icon name and bind it to inline SVG markup using Angular's DomSanitizer to safely render trusted SVG strings within the component template.

Use @Input() name to select which icon markup to render
Use DomSanitizer.bypassSecurityTrustHtml for inline SVG strings
Bind size and color inputs to the SVG's width/height and fill

Registering the Icon Module

Package the icon component and its icon registry into a shared Angular module, exporting the component so it can be imported and reused across multiple feature modules in your application.

Export IconComponent from a shared IconModule for reuse
Maintain a central registry mapping icon names to SVG markup
Import IconModule wherever icons are needed across the app

Frequently Asked Questions

Why is DomSanitizer needed for inline SVG in Angular?

Angular sanitizes HTML bindings by default to prevent XSS — DomSanitizer.bypassSecurityTrustHtml explicitly marks your trusted SVG markup as safe to render inline.

Can the icon module support tree-shaking for unused icons?

With careful module structuring and individual icon imports rather than one large bundled registry, unused icons can potentially be tree-shaken, though this requires deliberate setup.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG