Angular 前端加载时没有错误，但没有任何图标或其他角度/材质正确显示在页面上

Question

这是我的标头组件 ts、css 和 html 文件。

import { Component } from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatToolbarModule} from '@angular/material/toolbar';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrl: './header.component.css',
})
export class HeaderComponent {

}

html

<mat-toolbar color="primary">
<mat-toolbar-row>
    <span>Youtube Growth</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon- 
      button with heart icon">
  <mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share 
icon">
  <mat-icon>share</mat-icon>
</button>

CSS是一个简单的Flex操作，工作正常，与问题无关。 现在我的 app.module 相关组件。 html.

<app-header></app-header>
<router-outlet></router-outlet>

模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import {MatButtonModule} from '@angular/material/button';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UploadVideoComponent } from './upload-video/upload-video.component';
import { NgxFileDropModule } from 'ngx-file-drop';
import {HttpClientModule} from "@angular/common/http";
import { HeaderComponent } from './header/header.component';
import {MatToolbar, MatToolbarRow} from "@angular/material/toolbar";
import {MatIcon} from "@angular/material/icon";
import { SaveVideoDetailsComponent } from './save-video-details/save-video- 
details.component';
import {FlexLayoutModule, FlexModule} from "@angular/flex-layout";
import {MatFormField} from "@angular/material/form-field";
import {MatOption, MatSelect, MatLabel} from "@angular/material/select";

@NgModule({
  declarations: [
    AppComponent,
    UploadVideoComponent,
    HeaderComponent,
    SaveVideoDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    NgxFileDropModule,
    MatButtonModule,
    MatToolbar,
    MatIcon,
    FlexLayoutModule,
    MatFormField,
    MatSelect,
    MatOption,
    MatLabel,
    ReactiveFormsModule,
    FlexModule,
    MatToolbarRow
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

非常感谢任何帮助，因为我是 Angular 的新手。如果需要更多详细信息，请告诉我。由于没有错误消息，我没有包含该消息。网页正在显示 html 文件中的文本，但缺少颜色和图标。另外，虽然我不确定这是否是 intellij 的事情，但我在 macon 和其他 html 元素上突出显示 - Unknown html tag mat-toolbar-row 等。

Answer 1

AppModule 中似乎缺少一些模块：

  imports: [
    MatToolbarModule, 
    MatIconModule,
    .....

不要忘记在你的index.html中导入图标字体：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />