css - Internet Explorer 11 cannot recognize attr.xlink:href -

i new in angular 2. trying create icon component. code below works fine in chrome , firefox, doesn't work in internet explorer 11.

my component looks following:

@component({   selector: 'my-icon',   template: `     <svg *ngif="_iconclass" class="icon" [ngclass]=_iconclass        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       <use xlink:href="" attr.xlink:href="#{{ _iconclass }}" />     </svg>   ` }) export class myicon {    private _iconclass: string = '';   @input() set iconclass(i: string) {     if ((i !== undefined) && (i.indexof('.ico') > -1)) {       // remove .ico iconname       this._iconclass = i.substr(0, i.length - 4);     } else {       this._iconclass = i;     }   } 

then, using in component following:

<my-icon iconclass="icon--user"></my-icon> 

i haven't add code, hope still makes sense. when have checked in developer tools, tag <use xlink:href> empty. assumption ie 11 can't identify attr.xlink:href="#{{ _iconclass }}".

i cannot see wrong. appreciate help.

edit:

this error printed console

exception: typeerror: unable property 'contains' of undefined or null reference in [_iconclass in myicon@1:9]

private validateicon(): void {     if ((this._iconclass !== undefined) && (this._iconclass !== '') && (document.getelementbyid(this._iconclass) === null)) {       if (this._validateiconrunonce) {         console.warn('icon(' + this._iconclass + ') not found.');         this._iconclass = 'not-found';       } else {         // delay validate icon 3s wait until iconlibrary loaded         this._validateiconrunonce = true;         settimeout(() => this.validateicon(), 3000);       }     }   } 

gunter

thank support. found solution here: https://github.com/eligrey/classlist.js

to support svg in ie9+ required add classlist.js.