Angular 5 Material Dialog box with header strip on top

I just played around using the Inspector Tool and this can be achieved using this:

.mat-dialog-container {
    padding-top: 0 !important;
}

dialog-overview-example-dialog.ng-star-inserted > div {
    margin-right: -24px;
    margin-left: -24px;
}

.mat-dialog-actions {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mat-dialog-title {
  margin-top: 15px !important;
}

Note: I haven't looked for any solution which is provided by the framework itself.

Use the build in toolbar that is part of material.

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Dialog Title</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
</h4>
<div mat-dialog-content>
  Modal Content here
</div>

Custom CSS for header

.task-header {
    background-color: transparent;
    padding: 0 5px;
     height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}