Angular2 + SVG: using one template for multiple components (IE fix?)

Question

Angular2 + SVG: using one template for multiple components (IE fix?)

I have several SVG icons that use the same html template to insert a line (containing SVG markup). Everything works fine in every browser except IE11 (I believe something below IE11 will have the same problem).

Here's what the template looks like :

<svg data-component [attr.viewBox]="vbox" preserveAspectRatio="none">
   <svg:g #svgContainer></g>
</svg>
<span *ngIf="label">{{ label | translate }}</span>

This is the base icon class , which is subsequently expanded by every other icon component:

import { Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class IconBase implements AfterViewInit {

  @Input('icon-label') public label: string;
  @Input('icon-vbox') public vbox: string = '0 0 30 30';

  @ViewChild('svgContainer') public svgContainer: ElementRef;

  public svgString: any = '';

  ngAfterViewInit(): void {
    this.svgContainer.nativeElement.innerHTML = this.svgString;
  }
}

So far so good. Now here is one component of the iconWhich - like every other icon component - installs only svgString. Everything else will take care of the base icon class:

import { Component } from '@angular/core';
import { IconBase } from './icon';

@Component({
    moduleId: module.id,
    selector: 'icon-view-list, [icon-view-list]',
    templateUrl: './icon.html'
})

export class IconViewListComponent extends IconBase {
    public svgString: string = `
        <path class="st0" d="M5.1,10H10V5.1H5.1V10z M12.5,5.1V10h12.4V5.1H12.5z M12.5,17.5h12.4v-4.9H12.5V17.5z M12.5,24.9h12.4V20H12.5
        V24.9z M5.1,17.5H10v-4.9H5.1V17.5z M5.1,24.9H10V20H5.1V24.9z"/>
    `;
}