Scribd
Upload
5 views2 pages

Using SVG Icons in Angular Efficiently

The document discusses the limitations of using the IMG tag to display SVGs in Angular, specifically the inability to change their color. It introduces a solution using the angular-svg-icon library, which simplifies the process of displaying and customizing SVGs by creating an SVG Icon registry. The document provides installation and usage instructions for implementing this library in an Angular application.

Uploaded by

dailydevstudio
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views2 pages

Using SVG Icons in Angular Efficiently

The document discusses the limitations of using the IMG tag to display SVGs in Angular, specifically the inability to change their color. It introduces a solution using the angular-svg-icon library, which simplifies the process of displaying and customizing SVGs by creating an SVG Icon registry. The document provides installation and usage instructions for implementing this library in an Angular application.

Uploaded by

dailydevstudio
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

MUHAMMAD

HUZAIFA

Using angular-svg-
icon
Date:  Jan 30, 2025 

Old Method: Using IMG Tag to display SVGs


Issue: Can’t change color of SVG
Solution By: Muhammad Huzaifa

Background

While adding SideNavbar Icons, I noticed that we’re using IMG tag to display SVG’s. One of
the main reason behind using SVGs is that, we can customize their color as per our need. But
if we use IMG tag to display SVG, we can’t change color.

In angular, there is no other way to display SVG’s from Internet or Public Directory by default.
We have to create SVG Icon registry to extract the code of SVG from Internet or Public
Directory, sanitize it from malicious code, and then add them as a component in our code.
Doing this manually takes a lot of time. So I found a library doing all of this, and saving our
time.

Usage

Steps:

Run npm i angular-svg-icon@18.0.2 (compatible with Angular v18)


In [Link], add this provider: [Link]()
Import SvgIconComponent in any component where you want to use SVGs.

Use them in html file of component

You might also like