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

Viewed 638

I have multiple SVG icons, which use the same html template to insert a string (containing an SVG markup). It all works fine in every browser except for IE11 (I believe anything below IE11 would have the same problem).

Here is how the template looks:

<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 subsequently is being extended 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 icon component, which - as every other icon component - only sets the svgString. Everything else is taken care of at 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"/>
    `;
}

That string can be a path, a line, a polyline, a circle - basically any SVG element.

Chrome and Firefox insert the string into the <svg> element, however IE does nothing - it only renders empty <svg>. I tried to follow an advice by namespacing the svg element where the insertion should take place, but no, that didn't help. Any suggestions? Maybe some code refactoring altogether?

Thanks.

0 Answers
Related