我是一个很新的Angular ，做我的第一个应用程序。我想使用Angular 材料库图标，遇到了一个错误，说'mat-icon' is not a known element:。
此处出现完整错误

error NG8001: '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.
11       <mat-icon>favorite</mat-icon>

据我所知，当您不在App module中导入MatIconModule时，问题就出现了。
但是，即使在导入它之后，我仍然得到同样的错误。
以下是我目前所做的尝试。
html file，显然错误指的是这个组件，我在这里使用了图标

<div>
  <div>
    <button mat-fab disabled aria-label="Example icon button with a heart icon">
      <mat-icon>favorite</mat-icon>
    </button>
  </div>
</div>

app.modules.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { HttpClientModule } from "@angular/common/http";
import { MatIconModule } from "@angular/material/icon";
import { MatButtonModule } from "@angular/material/button";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatCardModule } from "@angular/material/card";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatToolbarModule,
    HttpClientModule,
    MatIconModule,
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

和Package.json

{
  "name": "angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.5",
    "@angular/cdk": "~10.2.7",
    "@angular/common": "~10.2.5",
    "@angular/compiler": "~10.2.5",
    "@angular/core": "~10.2.5",
    "@angular/forms": "~10.2.5",
    "@angular/material": "^10.0.0",
    "@angular/material-moment-adapter": "^10.0.0",
    "@angular/platform-browser": "~10.2.5",
    "@angular/platform-browser-dynamic": "~10.2.5",
    "@angular/router": "~10.2.5",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.4",
    "@angular/cli": "~10.2.4",
    "@angular/compiler-cli": "~10.2.5",
    "@angular/language-service": "~10.2.5",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.8"
  }
}

我也试过npm i，但也没有帮助。请让我知道，如果我应该包括更多的文件，以便您可以更好地了解这个问题。任何帮助将不胜感激。

更新

现在，我创建了'material.modul.ts，而不是将Material components导入到app.module.ts中，现在import看起来是这样的。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { MaterialModule } from "./material/material.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

material.module.ts

import { NgModule } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";

const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
];

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents],
  providers: [
    {
      provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
      useValue: {
        strict: true,
        useUtc: true,
      },
    },
  ],
  declarations: [],
})
export class MaterialModule {}

不幸的是，虽然它看起来更好，但也不工作。我觉得有版本不匹配。