How to make a round checkbox with angular-material

Question

My code is pretty simple

<mat-checkbox
  [(ngModel)]="checked"
  [color]="'primary'"
></mat-checkbox>

How can I make this material checkbox round? I have tried setting the style border-radius: 50%on pretty much all tags generated by Angular under this element but the most I have achieved is a round 'selected' look inside a rectangle.

I am sure there is a better way. I have found this answer about reusing the graphics of a radio-button but I have been unable to adapt it to my case (dont even know where to start)

Answer 1

The solution is created based on the comment posted by Prashant Pimpale as he did not create an answer himself. Stackblitz is updated to latest version of libraries at time of writing this.

HTML

<mat-checkbox color="primary">Regular checkbox</mat-checkbox>
<mat-checkbox class="custom-frame">Circular checkbox</mat-checkbox>

SCSS

::ng-deep .custom-frame {
  & .mat-checkbox-background, .mat-checkbox-frame {
    border-radius: 70% !important;
  }
}

Stackblitz: https://stackblitz.com/edit/angular-material-kuztkp