Angular 4 Material - mat-button style not being applied in mat-dialog component

Question

I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.

How do I get the style to show? AFAIK I have imported all modules as required and properly set up each part of Angular Material including the themes.

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-dialog.component.html:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  ...
</div>
<button mat-button mat-dialog-close>Close</button>

app.module.ts:

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '@angular/material'

import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent
  ]
})
export class AppModule { }

Answer 1

Newly imported modules need to be added to imports:

import { MatButtonModule } from '@angular/material/button'

@NgModule{
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  ...
})

Answer 2

Worth noting that the new angular 9 build system requires you stop the "ng serve" script and run it again after adding a material module

Answer 3

TL;DR
If you have other things working but not a specific component, make sure that component's module is imported & imported correctly as modules have to be added to the imports:

@NgModule{
  imports: [
    MatCardModule,
    MatButtonModule
  ]
})

Note: Remember to stop the "ng serve" script and run it again after adding the material module as the new angular 9 build system requires to do so.

Explanation:
I had the same issue where I had a CustomMaterialModule where I was importing all the Material Modules I needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule & not in exports array.

Note: my CustomMaterialModule hosts all the Material Modules I need in my app so modules like MatButtonModule will go in my CustomMaterialModule imports and exports array and later I would only use my CustomMaterialModule in other places of my app. I did this to keep the code clean and easy for editing. So for example, if one month down the road I don't need a Material Module I can just remove it from my CustomMaterialModule and not worry about it.

Answer 4

can also be missing a line in styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';