angular 8 material dialog close button with X top right

Question

I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning.

component.ts

this.d.open(loginComponent, {   width: '300px',   height: '',   panelClass: 'dialogC', }); 

component.html

<mat-dialog-content>     <button mat-button class="close-icon" [mat-dialog-close]="true">         <mat-icon>close</mat-icon>     </button>     <h2 mat-dialog-title>Login</h2> 

style.scss

.dialogC {   position: relative !important; }  .close-icon {   position: absolute;   top: 0;   right: 0;   transform: translate(50%, -50%); } 

The X is just aligned to the left instead of top right. Suggestions?

Update, this is the problem I get after adding flex:

Answer 1

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

Answer 2

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