Change Angular Material Expansion Panel Toggle Icon positioning

Question

The angular expansion panel has a default toggle button to the right like so:

I've tried looking into the documentation but couldn't find what I wanted. Is there a simple way of putting the toggle button to the left of the title(Personal Data) instead of having it all the way to the right?

There were some proprties to hide the toggle button but nothing relating to changing its position.

Answer 1

You can reposition the arrow button by overriding the default style rules. You are looking at mat-expansion-panel-header class in this case.

.mat-expansion-panel-header {
  flex-direction: row-reverse;
}
.mat-content {
  padding-left: 10px;
}