angular2: создание значков svg с * ngIf ничего не добавляет к DOM

Question

Я использую icoMoon для импорта значков SVG.

HTML, я хочу построить с помощью ngIf следующего шаблона:

<div class="contactIcon"> 
    <svg class="icon icon-envelop"> 
     <use xlink:href="symbol-defs.svg#icon-envelop"></use> 
    </svg> 
</div> 

Так я экспортирующий массив иконок со значком и XLink свойств:

export class NavigationComponent { 
    icons = [{ 
      icon: 'icon icon-envelop', 
      xlink: 'symbol-defs.svg#icon-envelop' 
     }, 
     { 
      icon: 'icon icon-facebook2', 
      xlink: 'symbol-defs.svg#icon-facebook2' 
     }, 
     { 
      icon: 'icon icon-linkedin', 
      xlink: 'symbol-defs.svg#icon-linkedin' 
     }, 
     { 
      icon: 'icon icon-mobile', 
      xlink: 'symbol-defs.svg#icon-mobile' 
     }]; 
} 

и мой HTML выглядит следующим образом :

<div *ngFor="#i of icons" class="contactIcon"> 
    <svg [attr.class]="i.icon"> 
     <use [attr.xlink:href]="i.xlink"></use> 
    </svg> 
</div> 

Но когда я проверяю страницу, ничего не добавляется, и ошибки не отображаются в t он консоль. Все, что я вижу, это этот комментарий:

<!--template bindings={}--> 

Может кто-нибудь указать, что я делаю неправильно?

Answer 1

Насколько я помню, обходным путем является добавление атрибута xlink:href статически. Связывание может изменять такие атрибуты SVG, только добавление не работает. Это основная проблема с браузером. Полимерная страдает тем же:

<div *ngFor="#i of icons" class="contactIcon"> 
    <svg [attr.class]="i.icon"> 
     <use xlink:href="" [attr.xlink:href]="i.xlink"></use> 
    </svg> 
</div>