SVG flickering in Chrome in Angular app with data update

Question

I'm working on an app in Angular 4. In one view I'm using some svgs placed between data that is retrieved from API request. It looks like this:

<div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#message-icon"></use></svg>
  </div>
  <div>{{machine.state}}</div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#settings-icon"></use></svg>
  </div>
</div>

All svgs are put in one file (machine.svg), and are defined in < symbol > tags with ids.

Now my problem is when I set interval every 2 seconds to update data from API request, my svg icons appear to flicker with every update, but it only happens in Chrome.

I've checked the network logs and it seems that whole svg file is downloaded with every API request:

While in Mozilla everything works fine, svg is downloaded only once:

I've tried to put svg in < object > tag, but the requests are even more numerous. Putting every single svg in < img > tag seemed to resolve the problem with requests, but I would prefer to be in control of "fill" property. Putting the whole svg directly on the page solved problem too, but it doesn't seem to be a clean solution.

My question is if there is a way to retrieve svg from a file without Chrome downloading it constantly?

Answer 1

Also faced with this situation, the easiest way for me is to create a separate shared component that contains all the icons I need and which takes the parameters I need. For me, this is the fastest and most flexible solution.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'ngx-svg-icon',
  templateUrl: './svg-icon.component.html',
  styleUrls: ['./svg-icon.component.scss']
})
export class SvgIconComponent implements OnInit {
  @Input() icon: string;
  @Input() fill: string;

  constructor() {}

  ngOnInit() {}
}

Usage:

<ngx-svg-icon [icon]="'settings'" [fill]="'#ededed'"></ngx-svg-icon>