How do I add svg files via MatIconRegistry in unit tests?

Question

I\'m currently implementing \'unit testing\' in my angular application. However, if I run them, I receive multiple warnings/errors similar to this one: \'Error retrieving

Answer 1

Mock the mat-icon selector with the following component at the top of the unit test

@Component({
    selector: 'mat-icon',
    template: ''
})
class MockMatIconComponent {
    @Input() svgIcon: any;
    @Input() fontSet: any;
    @Input() fontIcon: any;
}

Then override the MatIconModule in the unit test as follows

beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ ...],
        providers: [ ...  ],
        imports: [ MatIconModule, NoopAnimationsModule ]
    })
    .overrideModule(MatIconModule, {
    remove: {
       declarations: [MatIcon],
       exports: [MatIcon]
    },
    add: {
        declarations: [MockMatIconComponent],
        exports: [MockMatIconComponent]
   }
   })
  .compileComponents();

You will no longer have the 'Error retrieving icon: Unable to find icon with the name ":myIcon"' issue when running the unit tests