Svg not always displayed

user_1817863 0
Viewed 4764

In whole my app I always have problem to display my svg correctly, sometimes it show all icon, sometime nothing, and sometimes 50% of them are displayed. Dont' understand why.

here is an example when I come on my page, often icons are displayed (but not always) : image

then when I navigate trough my app (lazyloading) to another menu and come back, here's result: image

another GIF in action: here I just switch tab (lazy loading) inside my app (FYI this GIF is croped you don't see tab where I clicked, it's outside this image) you can see sometimes it show icons sometimes NOT, don't know how linking svg from spirit works but there is one icons never dissapear called "#mark_all_as_read" from my symbols.svg however all have same syntax: svg error2

I add a icon X from spirite.symbols.svg inside index.html just before tag it is always displayed but when I move on a certain module (lazyloading) where I have this same X icon, someties it is displayed, sometimes not !

This behavior is same for partically all my icons I use svg in spirit like this : <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/utility-sprite/svg/symbols.svg#list"></use> </svg>

and the file that im linking is : symbols.zip

don't know if it's angular or angular-cli on ng s dev mode, or browser problem here I have plunker https://embed.plnkr.co/dQJIX2lMw8WOl9rQepGX/ but it works everytime (please switch HOME and ABOUT menu)

MORE INFOS: here is dom when it works: image

here when chrome not displayed it: image

My code of menu in a list : https://gist.github.com/istiti/9981daf8bc07f121401733bc6272e4a1

here's code where icon isn't always displayed <li routerLinkActive="slds-is-active" [routerLinkActiveOptions]="{exact: true}" *ngIf="'ACCOUNTING_WRITINGS' | permissions" class="slds-nav-vertical__item"> <a [routerLink]="['ecriturecomptable']" class=" slds-nav-vertical__action slds-text-link--reset" aria-describedby="entity-header"> <span class="slds-icon_container slds-icon-utility-open_folder slds-line-height_reset"> <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/utility-sprite/svg/symbols.svg#list"></use> </svg> </span> <ng-container i18n>Liste écritures comptable</ng-container> </a> </li>

ans this one where icon seems to be always displayed is only with another ngIf : *ngIf="('ACCOUNTING_WRITINGS' | permissions:'WRITE') && ecrituresAVerifier?.length"

ANOTHER IMPORTANT INFO : it's very weird , when i navigate to a route my browser make TWO http calls to same symbols.svg file when I remove && ecrituresAVerifier?.length in one of my

  • browser make correctly only ONE call and all my icons seems to be displayed all the time ! NB:It works on firefox event with this second condition in ngIf

    to resume: really wonder why with this second condition in a

  • && ecrituresAVerifier?.length in my ngIf the browser make another call If I remove it it make only one call!

    browsers impacted by this bug?

    actually tested on chrome last version it seems it works on FIREFOX all time !

    Browser: - [last ] Chrome (desktop)

    angular version & co: @angular/cli: 1.4.2 node: 6.11.0 os: win32 x64 @angular/* 4.4.3 typescript: 2.3.4

    • angular svg
    1 Answers

    I came across this issue too and tried many different things to get this resolved however what really helped was to define all svg icons in app.component.ts and using them everywhere in the app. I have previously defined the icons in the respective component's TS file. Later when I moved them to app.component.ts all the icons are working fine. Let me know if that helps.

    Also define Icons using IconRegistry in the constructor and use it like this (if you're using angular material) <mat-icon svgIcon="icon.svg"></mat-icon> or <i class="material-icons">icon.svg</i>

    user_56683760
    Related