Angular Matarial 工具栏图标未格式化

Question

我通过 ng add @angular/material 添加了 @angular/material 到 ng 应用程序。然后我在 app.modules.ts 中导入了我的模块，您可以在此处看到：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProductListComponent } from './product-list/product-list.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NoopAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的 AppComponent 中，我从 material.angular.io 中为工具栏复制了这段代码：

<mat-sidenav-container>
  <mat-sidenav>
    Test
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button mat-button>
        <mat-icon>menu</mat-icon>
      </button>
      <span>My App</span>
      
    </mat-toolbar>
    
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

但是现在的结果看起来不对。有人知道为什么按钮显示格式错误吗？

Answer 1

您需要将 MatButtonModule 添加到 AppModule 中的导入列表。

应该是这样的：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProductListComponent } from './product-list/product-list.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { HomeComponent } from './home/home.component';

/* Added this import */
import { MatButtonModule } from '@angular/material/button';


@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NoopAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,

    /* Added this import */
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Matarial 工具栏图标未格式化

Angular Matarial toolbar icons are not formatted

angular-material

angular