Replace mat-icon with SVG graphic

maticonregistry
svg icons
mat-icon-button
mat-icon font awesome
angular-svg-icon
mat-icon (click event)
mat-icon png
angular material icons example

Angular newbie here..could someone direct me to the right way how could I replace the existing Material icons with custom ones properly, more precisely with the SVG graphics? Something like this:

So this:

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>

With this:

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'INSERT_SVG_1_HERE' : 'INSERT_SVG_2_HERE'}}
</mat-icon>

Unfotunatley this does not exactly solve your problem, because you will need to use the argument svgIcon on the mat-icon element instead of using the innerText of mat-icon but otherwise it works:

  1. You have to allow to angular to import from svg's by declaring the module.
  2. To import/inline the icons into javascript, you will have to override the loader. This can be achieved through using the raw-loader.
  3. Now you will be able to import the svg into angular and register them through the MatIconRegistry;

As an example:

// src/typings.d.ts

declare module '*.svg' {
  const svg: string;
  export default svg;
}
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DomSanitizer } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatIconModule, MatIconRegistry } from '@angular/material';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import thumbsUp from '!!raw-loader!./thumbs-up.svg';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule, 
    MatIconModule 
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
        'thumbsUp', sanitizer.bypassSecurityTrustHtml(thumbsUp));
  }
}
// src/app/app.component.html
<mat-icon svgIcon="thumbsUp"></mat-icon>
// src/app/thumbs-up.svg
<svg>...</svg>

Another approach would be to install @mdi/svg

npm install @mdi/svg

and then follow the steps above, with the difference to import each necessary icon as well, e.g. expand_more and chevron_right

so in src/app/app.module.ts

// src/app/app.module.ts
...
import expandMore from '!!raw-loader!@mdi/svg/svg/chevron-down.svg';
import chevronRight from '!!raw-loader!@mdi/svg/svg/chevron-right.svg';
...
export class WeddingDayModule {
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer
  ) {
    iconRegistry
      .addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(chevronRight))
      .addSvgIconLiteral('expand_more', sanitizer.bypassSecurityTrustHtml(expandMore));
  }
 }

And in the html just as a simplification... but you will get the idea...

//src/app/app.component.html
...
<mat-icon [svgIcon]="expanded ? 'chevron_right' : 'expand_more'" (click)="expanded = !expanded"></mat-icon>
...

the down side with this approach is, that you will have to register all the icons you want to use... But at least you stay in the same domain of change. Instead of using the ligatures you can change them all through the svgIcon and you get more icons than just the icons the outdated material-design-icons library holds.

I hope that helps

How to Use Custom SVG Icons in Angular Material, A quick guide on how to use your own SVG icons with Angular Material 2. One such component is the <mat-icon> component. Firstly, in your Angular project, install Angular Material and its dependencies with the� <mat-icon>mood</mat-icon> A full list of Material icons which you can use directly can be found here. Custom SVG Icons. Let’s say you have a custom icon, unicorn_icon.svg placed in the assets folder of your project. Here’s an example folder structure: - src - assets - unicorn_icon.svg - environments - index.html -

You can use angular-svg-icon

The angular-svg-icon is an Angular 7 service and component that provides a means to inline SVG files to allow for them to be easily styled by CSS and code.

The service provides an icon registery that loads and caches a SVG indexed by its url. The component is responsible for displaying the SVG. After getting the svg from the registry it clones the SVGElement and the SVG to the component's inner HTML.

For more information: https://www.npmjs.com/package/angular-svg-icon

How to use custom svg icon in Angular material design, In this example we will register svg icon in our Angular application (Angular 8 in our case) and use it inside of mat-icon element as a. DOCTYPE svg PUBLIC "-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg How to show preloader on every route change in Angular � Angular - load � #3 – Create Custom SVG Icons with Angular Material 8 MatIconRegistry Service. Suppose if you require to use custom svg icon in your angular 8/9 project. Keep your custom svg icon headphone.svg in your assets folder. In order to work with custom icons with angular material < mat-icon > directive, we must import HttpClientModule in app.module

If it's not part of the material icons, why not use it as a normal image. Just use it like normal image tag:

<img src="{{nestedTreeControl.isExpanded(node) ? 'path_to_svg_file_1.svg' : 'path_to_svg_file_2'}}">

Icon, This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the color style on the mat-icon element. SVG (aka Scalable Vector Graphics) has been around as a format for sometime now, since 1999 in fact, with v1.1 of the specification released in 2001. Browser support has always held it back as an everyday format until recent years, IE8 and below doesn't support it,

Mat-Icon List : 900+ Angular Material Icons, mat-icon selector used to display Material icons in Angular.We have around find_replace find replace icon, <mat-icon>find_replace</mat-icon>. fingerprint graphic_eq graphic eq icon, <mat-icon>graphic_eq</mat-icon>. The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.. Because the aspect ratio of an SVG image is defined by the viewBox attribute, if this attribute isn't set, the preserveAspectRatio attribute has no effect (with one exception, the <image> element, as described below).

Angular Material 8/9 Icons Tutorial with Real-world Examples , How to use Angular Material icons and also create custom svg icons We'll learn to use <mat-icon> material design component to display fonts icon and SVG icons We have to install and setup angualr 8 project to display the Angular Angular 8|9 Chart.js Tutorial with ng2-charts Examples Create Login� This advance free online converter allows the user to convert their PNG, JPG and GIF files to Scalable Vector Graphics, SVG. If you want to convert PNG or JPG files to SVG without losing the quality, our advance SVG Creator can help you. Free PNG to SVG converter is the top-rated SVG converter that has converted more than 3 million files.

Angular: Using custom made SVG icons through Angular Material , assets/svg/icons'); } private loadIcons(iconKeys: string[], iconUrl: string): void { iconKeys.forEach(key => { this.matIconRegistry.addSvgIcon(key� If you convert from other vector formats like eps or ai, this converter will try to keep all vector and color data and convert your vector file as close as possible. The Scalable Vector Graphics (SVG) converter let you convert from almost 130 input formats. For more details about the SVG specification please follow this link.

Comments
  • Yes I'm aware of that approach and I managed to use it as an svgIcon on mat-icon… However I'm trying to find a way to replace 'expand_more' : 'chevron_right' with custom SVG-s, so it could be used in conditionals etc… Don't know if it's possible at all? Thanks for the effort, will award it when it's enabled
  • So if I understand correctly, the implementation you want to achieve is to find a consistent way of either using a custom svg icon or a defaultish material icon?
  • yes correct - so if I have custom let's say US-flag SVG graphic, I would like to be able to use it as 'us_flag_custom' anytime I need it
  • Okay, so how about to turn it the other way around and use e.g. @mdi/svg, and then import the material icons as mentioned above. Then they can at least be used consistently as svgIcon's. Not perfect as you would have to register each material icon that you want to use... If you think that would solve the problem, I'll update the answer
  • @Smithy btw, just figured, you can mix it without problem. <mat-icon [svgIcon]="icon">{{ icon }}</mat-icon>, if no ligature is available, the svgIcon is taken.
  • It does not seem to work like that…shows only '../folder' if I insert it like '../assets/SVG_file.svg'