How to: Using Mat-Icon — Part Two
Using local SVG’s with Angular Materials Mat-Icon component.
By Duncan Faulkner — February 2021
In my last post, I talked about using Angular Material’s Mat-Icon component with local SVG images. Though the code worked, it was not going to scale well if we had a lot of images in our application. So, in this post, I want to look at reducing the amount of repetitive code we had to write and to make it easier to maintain.
To recap, we finished the last post by using a module to load the images. In the constructor we injected the matIconRegistry service and called the addSvgIcon to register the images in the application, passing image name and a sanitised URL to the image location. Even with chaining these together, it was going to get unmanageable and unreadable very quickly.
So how can we improve on this?
We need to break things up. We are repeating the call to addSvgIcon where we could call this on a loop. But to do this we need to split out the images so we can pass them in and iterate over them.
So, let’s start with the images. It would be better if we can have the images in their own file. I created a new icon.ts file and created an enum to list the images. There are two options here: a string enum, where you will need to supply both the key and a value pair. This scenario is handy if the images have long (or unfriendly) names.
If the names are less complex (or there isn’t going to be a lot of images) then you can use a simple enum. With this variation, we will only need to add the image file name.
Next, we need to create an Icon.service.ts file to load and register the images.
In the constructor we are injecting the MatIconRegistry service and the DomSanitizer.
The registerIcons() function calls a private function called load and takes an enum and a url as parameters. The “Icons” is a reference to the enum in the icons.ts file and the string ‘assets/img’ is the location to the image's directory.
In the load function we use Object.keys() to give us the keys of the enum so we can iterate over them. So, for each key we will register the image and sanitize the URL by passing it to bypassSecurityTrustResource.
The load function of the icon.service is slightly different if you use a string enum.
In the load function, we need to use the index to get the image name from the enum key, notice the icons[icon] in the call to the sanitiser.
We now need to call this service when the application loads. In the app.component.ts in the constructor, inject the IconService and then call registerIcons() function.
In the HTML file we add the Mat-Icon component and set the svgIcon property to the enum.
I think we have achieved our objectives. The code is much more readable and maintainable. The images are now separate and we’ve implemented a service that’s easier to maintain. We’ve also removed all of the repetitive code.
Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!
Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:
- Expert panels and Q&A sessions with the speakers
- A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
- Hands-on workshops
- Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget
We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.
