Registering mat-icon in the angular shared module and using it in the host application

Question

I have shared module-

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
    ThreeDotsIconComponent,
    HighlightDirective
  ],
  declarations: [
    HighlightDirective,
    ThreeDotsIconComponent
  ],
  entryComponents: [
  ],
  providers: []
})
export class SharedLayoutModule {}

The ThreeDotsIconComponent component is a simple component which contains the code for material 2 icon component.

import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';

/**
 * @title SVG icons
 */
@Component({
  selector: 'icon-svg-example',
  templateUrl: 'icon-svg-example.html',
  styleUrls: ['icon-svg-example.css'],
})
export class IconSvgExample {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
  }
}

I want to use the thumbs-up icon name in all the host projects (all the projects where shared module is used). I want to do this without using its html selector like-

<icon-svg-example></icon-svg-example>

in the host project. I am not sure how to do this. tried many ways but not finding the exact solution. I will use this like-

<mat-icon svgIcon="thumbs-up"></mat-icon>

I don't want to register the icons in the host project. Please help!

Answer 1

add module for register your svg icons like this:

export class IconSvgModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'export-file',
      sanitizer.bypassSecurityTrustResourceUrl('content/images/icon/svg/export.svg'));
  }
}

and import/export this module in shared.module

imports: [IconSvgModule],
exports: [IconSvgModule]

now you can use it in any where like this

<mat-icon svgIcon="export-file" ></mat-icon>