Is it possible to transfer the toggle icon form p-panel to the left, before the header?

Question

I've been trying to move the toggle icon to the left, but before the header. Can someone knows if this is possible? I don't want to lose the functionality of the icon.

The attribute iconPos=start is moving it to the left, but after the header title.

Answer 1

Use display: flex and flex-direction: row-reverse on p-panel-header class, this will reverse the position of the icons and the tile, then adjust the margin according to your need.

::ng-deep .custom-panel .p-panel-header {
  display: flex;
  flex-direction: row-reverse;
}

::ng-deep .custom-panel .p-panel-title {
  margin-left: auto;
}

::ng-deep .custom-panel .p-panel .p-panel-icons-end {
  margin-left: 0;
}