title: Angular 4 Material - mat-button style not being applied in mat-dialog component
body: <p>I want to create a <code>mat-dialog</code> with a default-style <code>mat-button</code> for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material.</p>
  
  <p>How do I get the style to show? AFAIK I have imported all modules as required and <a href="https://material.angular.io/guide/getting-started" rel="noreferrer">properly set up each part of Angular Material including the themes</a>.</p>
  
  <p><code>my-dialog.component.ts</code>:</p>
  
  <pre><code>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() {
    }
  
  }
  </code></pre>
  
  <p><code>my-dialog.component.html</code>:</p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Lorem Ipsum&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
    ...
  &lt;/div&gt;
  &lt;button mat-button mat-dialog-close&gt;Close&lt;/button&gt;
  </code></pre>
  
  <p><code>app.module.ts</code>:</p>
  
  <pre><code>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 { }
  </code></pre>