Angular2中的SVG循环

Question

我有一个API，它以下列格式返回数据：

[{"title": "first", "icon": "firstIcon.svg"},
 {"title": "second", "icon": "iconForSecond.svg"}
 .
 .
] 

我想使用* ngFor将它们添加到Angular2页面。 我可以使用SVG作为图像轻松使用：

<div *ngFor="">
  <img [src]='item.icon'/> item.title
</div>

但是，如果我尝试使用[1]中指定的SVG来做同样的事情，因为我希望能够在SVG等上应用CSS悬停样式。我似乎无法让它工作。 我试过的两种方法都不起作用。

<object data="item.icon" type="image/svg+xml"> // Does not work
<object [data]="item.icon" type="image/svg+xml"> // Does  not work

我该怎么办呢？ 我在这里错过了什么？

[1] 我是否将<img>，<object>或<embed>用于SVG文件？

Answer 1

检查一下

<object data="{{ 'path/to/svg/' + item.icon }}" type="image/svg+xml">
    <img src="yourfallback.jpg" />
</object>