Javascript 在Angular2中循环SVG

我有一个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] 检查一下这个

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

检查这个

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