How to use Angular Materials - Mat-Icon (with local SVG images)

When using Angular Material and SVG images, most of the time you will probably just use the web fonts from the Angular Material Icon library. But there are times when we need to use local SVG icons, this Shook looks at the following:

• How to set up the Mat-Icon.
• How to register Icons.
• How to change the colour of an Icon.
• How to set up a service to register Icons, to reduce code duplication.

This Shook also includes copies of the Angular Setup Guide (one using ngModules and one for the NEW Standalone component feature), which explains how to set up Angular CLI, Node, Node Version Manager (nvm) and how to add Angular Material to an Angular project.

★★★★★
What the readers think: J.Warner
Duncan is one of the more knowledgeable people I know when it comes to Angular Material. In this ebook, he explores how to use the tools provided by Angular Material to add your own SVG icons. He covers some important topics like how to avoid XSS attacks when using your own SVG icons, how to cut down on repetitive code when adding SVG icons and how to control colours when certain events happen. I appreciate his writing style and the step-by-step guide with code to help add my own SVG icons to Angular Material.