如何使用角材料制作圆形复选框

Question

我的代码很简单

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

我怎样才能使这个材料复选框变圆？我已经尝试border-radius: 50%在这个元素下由 Angular 生成的几乎所有标签上设置样式，但我获得的最多的是矩形内的圆形“选定”外观。

我相信有更好的方法。我找到了这个关于重用单选按钮图形的答案，但我一直无法适应我的情况（甚至不知道从哪里开始）

Answer 1

该解决方案是根据 Prashant Pimpale 发布的评论创建的，因为他自己没有创建答案。在撰写本文时，Stackblitz 已更新为最新版本的库。

HTML

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

社会保障局

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

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