Angular material icon mat-icon is not displaying correctly

Question

I am creating Navigation drawer in my angular 4 app using angular-material. Initially, I am creating a toolbar to have header and menu button(mat-icon is menu)

Here is my code,

<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>

But I am getting the output as follows,

But I wanted output something like this,

The difference in the output is, the mat-icon button has grey background whereas the required doesn't. Please correct me.

The 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

In your app.module.ts, you forgot to import MatButtonModule into your module. (By the way, you shouldn't import every single module if you don't even use it. It's a bad idea!)

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