'Icons showing as garbage symbols on refresh of page

I am using some custom icons in my application, as show below.

Image of actual icons

However when I refresh the page, or sometimes on some other action, the icons change to these garbage symbols. This happens randomly. Is there any permanent solution for this?

Image of garbage icons

Here is a bit of the sample code where these icon classes are used. These are custom icons and the icon.css is added to the assets folder.

    [ngClass]="{'disable':disableDeleteIcon()}" (click)="deleteContact()"></span>

<span class="icon-edit grid-renderer-edit-icon" title="Edit"
    *ngIf="params.colDef.headerName == 'Action' && !params.isDeletedRecords" [ngClass]="{'disable':disableEditIcon()}"
    (click)="editContact()"></span>

<span class="icon-refresh grid-renderer-restore-icon" title="Restore"
    *ngIf="params.colDef.headerName == 'Action' && params.isDeletedRecords" (click)="restoreContact()"></span>```
htmluser-interfaceicons


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions