SVG flickering in Chrome in Angular app with data update
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>
Try to configure your server to add cache-control headers to those requests. I have the same issue on localhost, but on my production server icons come with cache-control: max-age=172800 header and are not re-requested again.