title: (google chrome) why loading SVG's using <object> tags loaded one by one in angular 2, also they get reloaded each time I hide/unhide a component?
body: <p>Please check this Plunker</p>
  
  <p><a href="https://plnkr.co/edit/qGr2Owj5wYZZMpp6lHuA?p=preview" rel="nofollow">https://plnkr.co/edit/qGr2Owj5wYZZMpp6lHuA?p=preview</a></p>
  
  <pre><code>&lt;div&gt;
    &lt;h2&gt;Hello  {{name}}&lt;/h2&gt;
    &lt;div&gt;
      &lt;img src="icon.svg" style="width:50px;height:50px"/&gt;
    &lt;/div&gt;
  
    &lt;button (click)="showHideItems()"&gt;Show hide Items&lt;/button&gt;
  
    &lt;div style="height:10px; border-bottom:1px solid #cecece;"&gt;&lt;/div&gt;
    &lt;div [hidden]="itemsVisible" style="margin-top:10px;"&gt;
      &lt;div *ngFor="#item of items"&gt;
      &lt;my-item [icon]="item.icon" [itemName]="item.itemName"&gt;&lt;/my-item&gt;  
    &lt;/div&gt;  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    //our root app component
  import {Component} from 'angular2/core';
  import {Item} from './item';
  import {ItemData} from './itemData';
  
  @Component({
    selector: 'my-app',
    providers: [],
    templateUrl: "./app.html",
    directives: [Item]
  })
  export class App {
    public items:ItemData[] = [{itemName:"test0",icon:"icon.svg"},
                               {itemName:"test1",icon:"icon2.svg"},
                               {itemName:"test2",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon2.svg"},
                               {itemName:"test3",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon2.svg"},
                               {itemName:"test3",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon2.svg"},
                               {itemName:"test3",icon:"icon.svg"},
                               {itemName:"test3",icon:"icon.svg"}];
  
    public itemsVisible:boolean;
    constructor() {
      this.itemsvisible = true;
      this.name = 'Angular2'
    }
  
  
     showHideItems(){
  
      this.itemsVisible = !this.itemsVisible;
    }
  }
  </code></pre>
  
  <p>I am trying to load SVG graphics using object tag in angular 2 but the problem is that the object tags are loaded one after another. also if I hide/unhide a component the object tags get reloaded again, how to solve this issue. </p>
  
  <p>using image tags does not have this issue. </p>