Vertically aligning mat-expansion-panel header after misalignment due to adding icon-button to description

Question

I have added an icon-button to the header description of my mat-expansion-panel, however it has thrown the vertical alignment out of my actual panel header.

Is there a simple way to fix this?

https://stackblitz.com/edit/justify-toggle-button-end-ulgdrt

Answer 1

You can add below code it will take care of vertical alignment

.mat-expansion-panel-header-title {
    display: flex;
    justify-content: center;
    flex-direction: column;
}