I still wanted to be able to change the colours of the icons at various stages throughout the application based on certain conditions as well as on hover. I wanted to use the Mat-Icon component out of the box. In a recent project I had a bespoke set of SVG icons, the Angular web application was to be installed on a server that didn’t have access to the internet, so the images had to be local. Note: Requires an Angular application with Angular Material installed and configured with a reference to Font-Awesome library.īut what about if you have custom icons that are not part of a web font? And would like to makes changes to the icon, for example: change the colour on hover or on a specific condition at run time? This component works with web fonts like Font-Awesome for instance, simply by adding the name of the image required and an image is displayed. When developing an Angular application with Angular Material, there comes a point when we need to add icons on our components, or buttons etc… Angular Material has the Mat-Icon component for doing this.
