Error: [@ant-design/icons-angular]:the icon hourglass-o does not exist or is not registered. (Karma)

Question

I realize this has something to do with importing or adding something in the providers array would fix the issue. Does anyone has a fix for this issue?

Spec: Angular CLI: 13.3.10
Node: 14.17.3 Package Manager: npm 6.14.13 OS: win32 x64

Angular: 13.3.12

   Error: [@ant-design/icons-angular]:the icon hourglass-o does not exist or is not registered.
    at IconNotFoundError (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:93:12)
    at MapSubscriber.project (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:235:23)
    at MapSubscriber._next (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:29:1)
    at MapSubscriber.next (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
    at Observable._subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/util/subscribeToArray.js:3:1)
    at Observable._trySubscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:42:1)
    at Observable.subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:28:1)
    at MapOperator.call (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:16:1)
    at Observable.subscribe (http://localhost:9877/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Observable.js:23:1)
    at http://localhost:9877/_karma_webpack_/webpack:/node_modules/@ant-design/icons-angular/fesm2015/ant-design-icons-angular.mjs:405:113

spec.ts

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/compiler';
import { async, ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';

import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NgZorroAntdModule } from 'app/ng-zorro.module';
import { searchBarComponent } from './search-bar.component';


describe('searchBarComponent', () => {
  let component: searchBarComponent;
  let fixture: ComponentFixture<searchBarComponent>;
  beforeEach(waitForAsync(() => {
   
    TestBed.configureTestingModule({
      declarations: [ searchBarComponent ],
      providers:[],
      imports:[HttpClientModule, RouterTestingModule,NgZorroAntdModule,TranslateModule.forRoot()],
      schemas:[CUSTOM_ELEMENTS_SCHEMA]

    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(searchBarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

npm install @ant-design/icons-angular@13

angular.json

"assets": [{
            "glob": "**/*",
            "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
            "output": "/assets/"
          }]

app.module.ts

import { CaretLeftOutline, SettingOutline, StepBackwardOutline } from '@ant-design/icons-angular/icons';
const icons: IconDefinition[] = [StepBackwardOutline, CaretLeftOutline, SettingOutline];
imports: [NzIconModule.forChild(icons)]