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

can also be missing a line in styles.css

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

Newly imported modules need to be added to imports:

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

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

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.


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