You can have the X at the title and display: flex ? Like this,

<div mat-dialog-title class="flex-container">
  <h1>Login</h1>
   <button mat-button class="close-icon" [mat-dialog-close]="true">
        <mat-icon>close</mat-icon>
    </button>
</div>
<div mat-dialog-content>
...
...
</div>

FlexBox to the rescue,

.flex-container { display: flex;}

SideNote: You can still use fxLayout instead of .flex-container

<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>

CSS: (Please give it in global (styles.css) or give ViewEncapsulation.NONE or else these styles wont affect.)

.cdk-overlay-pane.my-dialog {
  position: relative!important;
}
.close.mat-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  min-width: auto;
}

Note that in the CSS We now have a new class out of thin air .my-dialog

So, please mention that as panelClass in dialogRef like below,

this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass: 'my-dialog',
..
..

This yields me the following result,

Using mat-icon-button it is necessary to add only the style below to the button.

.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

Functional example:

stackblitz

In your component HTML file add the following markup at the top of all elements.

<div mat-dialog-title style="float: right; font-weight: 700; cursor: pointer;" (click)="close()">X</div>

In your component TS file add the close function as follows.

close(): void {
    this.dialogRef.close();
}

Don't forget to include the dialogRef inside the constructor as an argument

constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

Possible duplicate: 49420069

Close functionality and button alignment without TypeScript.

HTML:

<button class="button-close" mat-button [mat-dialog-close]="true">X</button>

CSS:

.button-close {
    justify-self: right;
    font-size: 20px;
    border: none;
    height: 30px;
    background-color: #FFFFFF;
    outline: none;
    color: #c04747;
    
    &:hover {
        cursor: pointer;
    }
}

What I prefer is doing something like this -

.html file

<button class="close" mat-button mat-dialog-title (click)="closeDialog()">X</button>

By giving mat-dialog-title to the button I make sure it is in the top layer and then I give custom class to it, something like

.css file

.close.mat-button {
    position: inherit;
    top: 0;
    right: 0;
    padding: 2px;
    line-height: 3px;
    min-width: auto;
  }

The button discussed above and my modal-content is in a parent div, which I display as flex and use as flex-direction: column

.dialog{
    display: flex;
    flex-direction: column;
}

.ts file

  closeDialog() {
    this.dialogRef.close();
  }```

You can acheive this by applying some css styles to mat-icon, you can achieve this.

Mat-dialog looks as below.

<button mat-icon-button class="close-button" [mat-dialog-close]="true">
  <mat-icon class="close-icon" color="warn">close</mat-icon>
</button>
<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>Hello World!</p>
</div>

Add the following css rules

// if you want to change the color of the icon
.material-icons.color_white {color: #ffffff;}
.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

//if you want some css animation
.close-icon {
  transition: 1s ease-in-out;
}

.close-icon:hover {
  transform: rotate(180deg);
}

//To place the x mark outside of the container
::ng-deep .icon-outside .close-button{
  float: right;
  top:-52px;
  right:-52px;
}

::ng-deep .icon-outside .mat-dialog-container {
 overflow: unset
}

Your mat-dialog consuming componnet should look as below

constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass:'icon-outside',
      data: {name: 'your name'}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

Adding custom class icon-outside is important.

This will change your code as expected. If you are seeking to change the color of the icon, Add these two classes to mat-icon material-icons & color_white

So your button will look as below:

<button mat-icon-button class="close-button icon-outside" [mat-dialog-close]="true">
  <mat-icon class="close-icon material-icons color_white">close</mat-icon>
</button>

On our project I did an implementation using flex and css.

.html file

<div fxLayout="column">
    <div fxLayoutAlign="end">
        <button mat-icon-button color="primary" (click)="close()"><mat-icon>close</mat-icon></button>
    </div>
    <mat-card class="pd-2">
         ...  
    </mat-card>
</div>

.ts file

    openMinimumsModal( ) {
        const dialogRef = this.matDialog.open(OrderMinimumsComponent, {
            width: 'auto',
            panelClass: 'dialog-no-padding',
           data: { ... },
        });
        dialogRef.afterClosed().subscribe(() => {});
    }

    close(): void {
        this.dialogRef.close();
    }

.css file

    .dialog-no-padding .mat-dialog-container {
        padding: 0;
    }

    .pd-2 {
        padding: 0 20px 20px 20px !important;
    }

The easy way now is:

<div mat-dialog-title class="dialog-title">
  <h2>Title</h2>
  <button mat-icon-button aria-label="close dialog" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
</div>

And the dialog-title css is

.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

That's working on Angular 8.0.0

I just ran into the same problem. I've come up with an easier solution using floats. This also aligns the close X with the title, which I find more visually pleasing.

HTML file:

<div>
  <h1 mat-dialog-title style="float: left">Dialog Title</h1>
  <span style="float: right" [mat-dialog-close]>X</span>
</div>

<div mat-dialog-content style="clear: both">
  ...
</div>