title: Angular 6 , Loading svg doesn't appear in chrome
body: <p>I'm trying to load few widgets in Angular 6 , and have created a loading symbol svg , and using following logic to hide and show the loading div , until all widgets are loaded , In firefox , the loading svg appears normally , but in chrome and IE , a blank window appears till all widgets are loaded , if I replace svg with text , even that won't appear in Chrome , here is the code </p>
  
  <p>app.component.html</p>
  
  <pre><code> &lt;div [hidden]="counter &gt;= 3" class="loading-div"&gt; 
         &lt;img src="assets/icons/loading-bee.svg" type="image/svg+xml"/&gt;
         &lt;span class="loading-bee-txt"&gt;Please wait while we retrieve the data.&lt;/span&gt;
  &lt;/div&gt;
    &lt;div&gt;
      &lt;wgt-financials (initialized)="counter = counter + 1"&gt;&lt;/wgt-financials&gt;
      &lt;wgt-financials (initialized)="counter = counter + 1"&gt;&lt;/wgt-financials&gt;
      &lt;wgt-financials (initialized)="counter = counter + 1"&gt;&lt;/wgt-financials&gt;
    &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>This works perfectly in Firefox , but not in Chrome or IE . </p>