Not able to render SVG sprites faster on IE 11 Browser

[Kumar-Aakash]

Hi,

I am using Angular Application and I am using Sprite SVGs ( XML ones ) to load icons in my application. This file located at src/assets/gen/svg path with name sprite.css.svg.

By Default IE11 is not able to load these icons so I have added import 'svgxuse' in my polyfill.ts file which is doing work for me.

But issue is it is taking around 2-3 seconds to load icons on web page.

If a component reloads again in Angular, it goes and fetches again, mean again it takes few seconds to load these icons.

I am also using icon.component.ts class to load my icons in HTML files.

Here is code Snippet:

icon.component.ts

`@Component({
selector: 'app-icon',
templateUrl: 'icon.component.html'
})
export class IconComponent {

@input() iconClass = '';
@input() spriteUrl = 'assets/gen/svg/sprite.css.svg#';
@input() iconName = '';

}`

icon.component.html

<svg class="icon icon-{{iconName}}" [ngClass]="iconClass"> <use [attr.xlink:href]="spriteUrl + iconName"></use> </svg>

and this is how I am rendering icons in some HTML

<app-icon iconName="download" iconClass="text-primary"></app-icon>

Can anyone explain how can I render all icons faster without any delay just like it works very smoothly in Chrome and Mozilla?

Thanks in advance.

[svkorepanov]

Hi, i have the same issue but with Vuejs.