import { Component , Input , ChangeDetectionStrategy , ElementRef , OnChanges , OnInit , ViewEncapsulation } from '@angular/core' ; import { HttpClient } from '@angular/common/http' ; import { IconRegistryService } from '../../services/icon-registry/icon-registry.service' ; @ Component ( { exportAs : 'ngxIcon' , selector : 'ngx-icon' , templateUrl : './icon.component.html' , styleUrls : [ './icon.component.scss' ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class IconComponent implements OnChanges , OnInit { @ Input ( ) fontIcon : string | string [ ] ; @ Input ( ) alt : string ; @ Input ( ) defaultPath = 'assets/svgs' ; @ Input ( ) fontSet = 'ngx' ; @ Input ( ) set svgSrc ( val ) { this . loadSvg ( val ) ; } cssClasses : string [ ] ; constructor ( private http , private elementRef , private iconRegisteryService ) { } ngOnChanges ( ) { this . update ( ) ; } ngOnInit ( ) { this . update ( ) ; } update ( ) { if ( this . fontIcon ) { this . cssClasses = this . iconRegisteryService . get ( this . fontIcon , this . fontSet ) ; } } loadSvg ( val ) { const opts = { responseType : 'text' } ; this . http . get < string > ( `${ this . defaultPath }/${ val }.svg` , opts ) . subscribe ( ( response ) => { const element = this . elementRef . nativeElement ; element . innerHTML = '' ; const parser = new DOMParser ( ) ; const svg = parser . parseFromString ( response , 'image/svg+xml' ) ; element . innerHTML = svg . documentElement . outerHTML ; } , err => { console . error ( err ) ; } ) ; } }