угловая кнопка закрытия диалога из 8 материалов с X верхним правым

Question

Я пытаюсь, чтобы в диалоговом окне моего материала была кнопка X в правом верхнем углу, но у меня проблемы с позиционированием.

component.ts

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

.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%);
}

X выровнен по левому краю, а не по верхнему правому.Предложения?

Обновление, вот проблема, которую я получаю после добавления flex:

Answer 1

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

CSS: (Пожалуйста, укажите его в глобальном масштабе ( styles.css ) или укажите ViewEncapsulation.NONE, иначе эти стили не будут влиять.)

.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;
}

Обратите внимание, что в CSS у нас теперь есть новый класс из воздуха .my-dialog

Так что, пожалуйста, отметьте это как panelClass в dialogRef, как показано ниже,

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

Это дает мне следующий результат,

Answer 2

Вы можете иметь X в заголовке и display: flex?Например,

<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 для спасения,

.flex-container { display: flex;}

Примечание: вы все равно можете использовать fxLayout вместо .flex-container