Show font-awesome icon if image does not exist

Question

I'm working on an Angular2 project and I'm trying to show an svg icon stored inside my "menu" model. If this image does not exists, I want to to show a default icon from font-awesome. So I tried:

<img [src]="'../icons/' + menu.icon + '.svg'" (error)="fa-icon" />
<fa-icon #fa-icon class="icon-menu" icon="home"></fa-icon>

This is not working. The page is trying to load the stored svg icon and after that is showing the home icon. I want it to display one or another, not both.

How can I do that?

Answer 1

I got it by doing this:

<img #customIcon [src]="'../icons/' + menu.icon + '.svg'" (error)="customIcon.hide= true" [hidden]="customIcon.hide" />
<fa-icon [hidden]="!customIcon.hide" class="icon-menu" icon="{{menu.icon}}"></fa-icon>

Answer 2

<img [hidden]="isError" (load)="this.imageIsLoaded = true;" (error)="this.isError = true;" [attr.src]="src" />

<span *ngIf="isError" class="fa-stack fa-3x">
    <i class="fas fa-map fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

I have done it like above and its working great in my solution. Hope it helps.