使用Firefox在Angular2中使用SVG精灵的问题

Question

在我的应用程序中，我使用gulp-svgstore生成svg精灵，然后使用ajax调用在angular2-cli app中的index.html中加载

<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "./assets/images/icon/sprite.svg", true);
  ajax.send();
  ajax.onload = function() {
    var div = document.createElement("div");
    div.setAttribute("class", "sprites");
    div.innerHTML = ajax.responseText;
    document.body.insertBefore(div, document.body.childNodes[0]);
  };
</script>

然后我为svg icon写了一个组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'icon',
  template: `<svg class="icon" [style.width.px]="size" 
                               [style.height.px]="size" 
                               [style.fill]="fill"
                               [ngClass]="class">
                               <use [attr.xlink:href]="'#' + name"></use></svg>`
})
export class IconComponent {
  @Input() name: string;
  @Input() size: any;
  @Input() fill: any;
  @Input() class: any;
  @Input() marginLeft: any;

  constructor() { }

}

这在Chrome或Safari浏览器中工作得很好，但在Firefox中它没有出现任何错误或警告！当我在Firefox中检查网络选项卡时，看起来像加载的sprite文件，但仍然没有显示！

如何解决此问题？为什么Firefox会这样？

非常感谢。