Alignment in Expansion Panel of Angular Material

Question

I want to align icon to the left side of the expansion panel and align the title to the center. I'm having a problem with the CSS, as text-align doesn't seem to work very well. I welcome any suggestions, thanks.

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title >
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

You can do something like this:

 <mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title class="panelTitle">
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>

And in the .scss file:

.panelTitle{
    display:flex;
    flex-direction:row;
    align-items:center;
    }

If the style still not applyed add encapsualtion:viewEncapsulation.None to the component decorator.

Hope this will work for you