Error retrieving icon :xxxxx! Http failure response for mat-icon in Angular 14

Question

I am trying to use custom svg for mat-icon in Angular using MatIconRegistery and DomSanitizer. But the following error is displayed in the console:

Error retrieving icon :xxxx! Http failure response

This is my app.component.ts file:

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    show: boolean = true;

    constructor(
        private matIconRegistry: MatIconRegistry,
        private domSanitizer: DomSanitizer
    ) {
        this.matIconRegistry.addSvgIcon(
            'banana',
            this.domSanitizer.bypassSecurityTrustResourceUrl('imgs/banana.svg')
        );
    }

    btnClickHanlder() {
        console.log('Button clicked');
    }
}

app.component.html

<app-button 
    btnType="primary" 
    btnSize="small" 
    btnText="Save" 
    *ngIf="show" 
    (click)="btnClickHanlder()"
></app-button>
<mat-icon svgIcon="banana"></mat-icon>

Can someone provide me a solution?