angular2：* ngIfでアイコンを構築するとDOMに何も追加されない

Question

icoMoonを使用していくつかのSVGアイコンをインポートしています。

私はngIfを使用して構築したいHTMLは次のパターンに従います。

<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は次のようになります：

しかし、ページを検査すると何も追加されず、エラーも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>