One simple solution 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>

Here is the css for dialog-title:

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

This setup has been tested on Angular 8.0.0

When using mat-icon-button, all you need to do is apply the following style to the button.

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

Check out a working example:

stackblitz

To enhance your component, you can start by including the markup snippet below at the beginning of all elements in your HTML file.

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

Next, in your TypeScript file for the component, add a function called close as shown:

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

Remember to ensure that you have dialogRef included in the constructor with MatDialogRef<YourDialogComponent> as an argument.

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

If you want to incorporate the X in the title and use display: flex, you can do it as shown below:

<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>

Utilize FlexBox for this styling,

.flex-container { display: flex;}

Note: Alternatively, you can also use fxLayout instead of .flex-container

My preferred approach involves setting up the following structure:

.html file

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

By assigning the mat-dialog-title to the button, I ensure that it appears on top layer, and then apply a custom class to it, like so:

.css file

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

The discussed button and modal-content are contained within a parent div styled with display: flex and flex-direction: column

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

.ts file

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

To achieve this effect, simply apply some CSS styles to the mat-icon element.

Below is an example of how a mat-dialog looks:

<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 for customization:

// Change color of the icon
.material-icons.color_white {color: #ffffff;}
.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

// Apply CSS animation
.close-icon {
  transition: 1s ease-in-out;
}

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

// Position x mark outside 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 component should be like this:

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');
    });
  }

Don't forget to add the custom class icon-outside.

By implementing these changes, your code will look as expected. To change the icon's color, add classes material-icons and color_white to the mat-icon element.

Your button will then appear as follows:

<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>

Dealing with the same issue led me to devise a simpler solution utilizing floats. This method also ensures that the close X is aligned with the title, resulting in a more aesthetically pleasing layout.

Here's how it can be achieved in HTML:

<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>

https://example.com/image.png

For our latest project, I tackled an implementation using a combination of flexbox and CSS styling.

In the .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>

In the .ts file:

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

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

In the .css file:

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

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

Similar post found: 49420069

Creating close functionality and aligning a button without using 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;
    }
}

Here is a sample code snippet that demonstrates how to create a header with a close button in Angular:

HTML:

<div class="header-and-close">
  <h1 mat-dialog-title>Header</h1>
  <button type="button" mat-icon-button (click)="closeDialog()" class="close-button">
    <mat-icon aria-hidden="false" aria-label="Close icon">close</mat-icon>
  </button>
</div>

TypeScript Component:

constructor(private dialogRef: MatDialogRef<YourComponent>) {}

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

CSS:

.header-and-close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

When faced with the task of adding a close button to multiple dialogs, I initially created wrapper components for each dialog and dynamically instantiated components inside. However, I soon realized this approach was overly complex and not very flexible. As a result, I opted to implement a directive specifically for adding the closing button to the dialogs individually. Here is how I went about it:

dialog-title.directive.ts

import {
    Directive,
    OnInit,
    Renderer2,
    ViewContainerRef,
    ElementRef,
} from '@angular/core';
import { DialogCloseButtonComponent } from './dialog-close-button/dialog-close-button.component';


@Directive({
    selector: `[dialogTitle]`,
    standalone: true,
    host: {
        '[style.display]': '"flex"',
        '[style.justify-content]': '"space-between"',
        '[style.align-items]': '"baseline"',
        '[style.padding]': '"10px 24px"',
    },
})
export class DialogTitleDirective implements OnInit {
    constructor(
        private renderer: Renderer2,
        private viewContainerRef: ViewContainerRef,
        private elementRef: ElementRef,
    ) {}

    ngOnInit() {
        const closeButton = this.viewContainerRef.createComponent(DialogCloseButtonComponent);
        this.renderer.appendChild(this.elementRef.nativeElement, closeButton.location.nativeElement);
    }
}

dialog-close-button.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';


@Component({
    selector: 'app-dialog-close-button',
    standalone: true,
    imports: [
        CommonModule,
        MatButtonModule,
        MatDialogModule,
        MatIconModule,
    ],
    templateUrl: './dialog-close-button.component.html',
    styleUrl: './dialog-close-button.component.scss'
})
export class DialogCloseButtonComponent {}

dialog-close-button.component.html

<button mat-dialog-close mat-icon-button aria-label="Close dialog">
    <mat-icon>close</mat-icon>
</button>

To utilize this functionality in your dialog template, simply include the following:

<h1 dialogTitle>Title of your dialog here</h1>

End Result:

https://i.sstatic.net/Y61ik.png

*Ensure you have imported DialogTitleDirective in your component or module.