import { Component , Input , ChangeDetectionStrategy , ElementRef , Renderer } from '@angular/core' ; import { Http , Response } from '@angular/http' ; @ Component ( { selector : 'svg-icon' , template : `<ng-content></ng-content>` , changeDetection : ChangeDetectionStrategy . OnPush } ) export class IconComponent { @ Input ( ) set name ( val ) { this . loadSvg ( val ) ; } @ Input ( ) alt : string ; constructor ( private http , private renderer , private elementRef ) { } loadSvg ( val ) { this . http . get ( `assets/${ val }.svg` ) . subscribe ( res => { const element = this . elementRef . nativeElement ; element . innerHTML = '' ; const response = res . text ( ) ; const parser = new DOMParser ( ) ; const svg = parser . parseFromString ( response , 'image/svg+xml' ) ; this . renderer . projectNodes ( element , [ svg . documentElement ] ) ; } , err => { console . error ( err ) ; } ) ; } }