Angular 5 using material, jasmine karma test fail with mat-icon

I was experiencing the same issues testing Material components.

Thanks to k.vincent for providing the correct answer for me in the comments.

For components using Material, ensure your *.spec file looks similar to this:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

My test were also failing for can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’; if ‘app-forgot-password’ is an Angular component, then verify that it is part of this module; if ‘mat-card’ is an Angular component, then verify that it is part of this module. In spec file i added imports of ReactiveFormsModule and CUSTOM_ELEMENTS_SCHEMA and it worked.

import { ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ ForgotPasswordComponent ],
  imports: [ReactiveFormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));

Then i had another error: Can’t bind to ‘routerLink’ since it isn’t a known property of ‘a’. I could fix it by adding RouterTestingModule in the spec file:

import {RouterTestingModule} from '@angular/router/testing';

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterTestingModule
  ],
  declarations: [ LoginFormComponent ]
})
.compileComponents();
}));