How to Use SVG in Angular
Use SVG in Angular with inline templates, Angular Material icons, HttpClient for external SVG loading, or a custom SVG sprite icon system.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Inline SVG in Angular Templates
The simplest method — paste SVG code directly in your Angular component template.
- Paste the <svg> element inside your component's HTML template
- Bind Angular expressions: [attr.fill]='iconColor'
- Use [ngClass] on SVG elements for conditional styling
- currentColor trick: set fill='currentColor' in SVG, control via CSS color property
- For reusable icons: create an Angular component wrapping the SVG
Using Angular Material SVG Icons
Angular Material's MatIconModule supports custom SVG icon registration.
- Import MatIconModule in your Angular module
- In your component or service: inject MatIconRegistry and DomSanitizer
- Register: iconRegistry.addSvgIcon('icon-name', sanitizer.bypassSecurityTrustResourceUrl('assets/icon.svg'))
- Use: <mat-icon svgIcon='icon-name'></mat-icon>
- Group icons in a namespace: addSvgIconInNamespace('myicons', 'star', url)
Frequently Asked Questions
How do I load an external SVG file in an Angular component?
Use HttpClient: inject HttpClient, then this.http.get('/assets/icon.svg', {responseType: 'text'}) and bind to innerHTML with DomSanitizer.bypassSecurityTrustHtml() — required to prevent XSS sanitization of the SVG.
What's the Angular-safe way to bind SVG HTML?
Use DomSanitizer: constructor(private sanitizer: DomSanitizer) and bind with [innerHTML]='sanitizer.bypassSecurityTrustHtml(svgString)'. Never bind raw SVG string to innerHTML without sanitization.
Can I use SVG icons without a library in Angular?
Yes. Store SVG files in src/assets/icons/. Reference with <img src='assets/icons/icon.svg'> or load inline with HttpClient. For complex icon systems, build an SVG sprite in assets/sprite.svg.
How do I animate SVG in Angular?
Use Angular Animations API (trigger, state, transition, animate) combined with [style] bindings on SVG attributes. Or use CSS animations directly on SVG elements via component-scoped CSS with ViewEncapsulation.
Related guides
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