角度材质图标垫图标无法正确显示

Question

我正在使用角度材料在我的角度4应用程序中创建导航抽屉。 最初，我正在创建一个工具栏，以便有标题和菜单按钮（mat-icon是菜单）

这是我的代码，

<mat-toolbar class="example-header" color="primary">
    <button mat-icon-button><mat-icon>menu</mat-icon></button>
<span class="header-name">Hello</span>
</mat-toolbar>

但我得到的输出如下，

但我想输出类似的东西，

输出的差异是，mat-icon按钮具有灰色背景，而所需不具有灰色背景。 请纠正我。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { FormsModule } from '@angular/forms';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { AppComponent } from './app.component';
import 'hammerjs';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatDrawer, MatDrawerContainer, MatDrawerContent,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,

  MatStepperModule,
  MATERIAL_SANITY_CHECKS
} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule
  ],
  providers: [GoogleMapsAPIWrapper],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

在app.module.ts中，您忘记将MatButtonModule导入模块。 （顺便说一句，如果你不使用它，你不应该导入每一个模块。这是一个坏主意！）

@NgModule({
  imports: [
    MatButtonModule
    // ...
  ]
})