title: I Installed Material Design in Angular 9, why can't I get the elements to show?
body: <p>I have an existing Angular 9 project that I'm trying to add the Material library to. However, I can't seem to get any of the elements to show and keep getting this error</p>
  <pre><code>core.js:14613 'mat-icon' is not a known element:
  1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
  2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  </code></pre>
  <p>I'm wondering what I might be missing! I have tried altering the versions of my dependencies, and importing all the modules, but would appreciate any help at all!</p>
  <p>Here is my app.module</p>
  <pre><code>import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { AppConfigService } from './services/app-config.service';
  import { AppInitializer } from './services/app-initializer.service';
  import { BrowserModule } from '@angular/platform-browser';
  import { DeviceModule } from './device/device.module';
  import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
  import { GatewayModule } from './gateway/gateway.module';
  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  import { HttpClientModule } from '@angular/common/http';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  import { LogoModule } from './logo/logo.module';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MatButtonModule } from '@angular/material/button';
  import {  MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
  import { MatIconModule } from '@angular/material/icon';
  import { MatFormFieldModule } from '@angular/material/form-field';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      CommonModule,
      MatButtonModule,
      MatProgressSpinnerModule,
      MatFormFieldModule,
      DeviceModule,
      GatewayModule,
      FormsModule,
      HttpClientModule,
      LogoModule,
      BrowserAnimationsModule,
      FormsModule,
      ReactiveFormsModule,
      MatIconModule,
      RouterModule.forRoot([]),
    ],
    exports: [
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    providers: [
      AppConfigService,
      {
        provide: APP_INITIALIZER,
        useFactory: AppInitializer,
        multi: true,
        deps: [AppConfigService]
      },
      {
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      },
      FormBuilder,
      FormsModule,
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>Here are the dependencies from my package.json</p>
  <pre><code>    &quot;@angular/animations&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/cdk&quot;: &quot;^9.2.0&quot;,
      &quot;@angular/common&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/compiler&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/core&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/forms&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/material&quot;: &quot;^9.2.0&quot;,
      &quot;@angular/material-moment-adapter&quot;: &quot;^9.2.0&quot;,
      &quot;@angular/platform-browser&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;^9.1.0&quot;,
      &quot;@angular/router&quot;: &quot;^9.1.0&quot;,
      &quot;core-js&quot;: &quot;^2.6.11&quot;,
      &quot;moment&quot;: &quot;^2.24.0&quot;,
      &quot;rxjs&quot;: &quot;^6.5.4&quot;,
      &quot;tslib&quot;: &quot;^1.11.1&quot;,
      &quot;zone.js&quot;: &quot;^0.10.3&quot;,
      &quot;bootstrap&quot;: &quot;^3.4.1&quot;,
      &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
      &quot;jquery&quot;: &quot;^3.4.1&quot;,
    },
  </code></pre>