Angular 16 / Material Dialog title height LARGE when having component inside

Question

After migrating to Angular 16 and Material MDC components we have a trouble with dialog titles that contain an element. It adds incredible amount of space to the top.

<div matDialogTitle class="tw-bg-debug-orange-light">
  <div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-bg-debug-sky-light">
    <span>Title</span>
    <mat-icon>close</mat-icon>
  </div>
</div>

looks like this

While having just plain h3:

<h2 matDialogTitle class="tw-bg-debug-orange-light">Hey</h2>

It seems to be caused by this but attempts to override that in styles.scss are of no use as they get hammered by this being "higher" by material generated styles.

.mdc-dialog__title::before {
    display: inline-block; 
    width: 0;
    height: 40px;
    content: "";
    vertical-align: 0;
}

What would you do?

Answer 1

if you want remove that. try this

.mdc-dialog__title::before {
    display: none;
}