How to prevent toggling mat-expansion-panel by clicking mat-expansion-panel-header?

Question

I know mat-expansion-panel-headers is a button. clicking anywhere on that button toggles the expansion opens/closes. But I don't want to let users click anywhere on the header and open it. There should be a small button. One click on that button will open/close the expansion panel. How can I do that?

I have tried this, but it didn't work.

<mat-expansion-panel>
<mat-expansion-panel-header (click)="$event.preventDefault()">
  <mat-panel-title>
    MENU
  </mat-panel-title>
</mat-expansion-panel-header>

Answer 1

amir's solution works in some cases but I was having some animation issues with the arrow. I found the solution here to be more consistent and overall I think its better:

Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

this for example will prevent the header expanding when clicking the checkbox