Click event not registered for nested `mat-checkbox` on IE11

I have a mat-checkbox inside a mat-expansion-panel (see code below):

    <mat-expansion-panel-header>
      Title
    </mat-expansion-panel-header>
    <div class="mat-expansion-panel-content">
      <div class="mat-expansion-panel-body">
        <mat-checkbox (click)="clickfunction()">Edit</mat-checkbox>
      </div>
    </div>
  </mat-expansion-panel>

When I check/uncheck the mat-checkbox, the click event does not get registered. I am not able to find a solution so far, I've tried adding pointer-events: all CSS property to the checkbox, but no luck. The functionality works flawlessly in all other browsers, and this glitch is only seen on IE11. Unfortunately, I have to support IE for my project.

Did anyone else face a similar issue and has a workaround?