MdDialog with Angular 4

I am trying to use MdDialog in Angular 4.

Dialog html:

<div style="width: 100%">
    <h2>Dialog</h2>
    <button md-raised-button (click)="dialogRef.close()">Close dialog</button>
</div>

Dialog Component:

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

@Component({
    selector: 'your-dialog-selector',
    templateUrl: './dialog.component.html'
})
export class DialogComponent {
    constructor(public dialogRef: MdDialogRef<any>) {
    }
}

Calling html:

<md-icon class="demo-dialog-open-button" (click)="open()">
                view_list
            </md-icon>

Calling component function:

open() {
        this.dialogRef = this.dialog.open(DialogComponent);

        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

app.material.module:

import { NgModule } from '@angular/core';
import {
    MdToolbarModule,
    MdIconModule,
    MdMenuModule,
    MdButtonModule,
    MdSelectModule,
    MdSnackBarModule,
    MdSnackBar,
    MdInputModule,
    MdTooltipModule,
    MdCardModule,
    MdDialogModule
} from '@angular/material';

@NgModule({
    imports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    exports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputModule,
        MdTooltipModule,
        MdCardModule,
        MdDialogModule
    ],
    providers: [
        MdSnackBar
    ]
})
export class AppMaterialModule {}

The problem I am having is that, the dialog opens as a vertical blank white box on the left of the screen. Inspect element shows this:

<md-dialog-container class="mat-dialog-container ng-tns-c7-4 ng-trigger ng-trigger-slideDialog" role="dialog" style="transform: none; opacity: 1;"><!--bindings={
  "ng-reflect-portal": ""
}--></md-dialog-container>

Why is it not showing the content of my dialog html?

you should have forgotten to add DialogComponent as entryComponents in respective NgModule

  entryComponents:[DialogComponent]

Check this Plunker!!