Search code examples
cssangularangular-materialangular-forms

How can I change the label font-size of an Angular mat-checkbox component?

I'm attempting to change the fontsize of mat-checkbox's label. Nothing I seem to attempt works as it's consistently being overriden by the component's default styles:

  1. !important
  2. ::ng-deep
  3. Setting global style in styles.scss

<mat-checkbox [(ngModel)]="reportOption.AllSelected" *ngIf="reportOption.SelectAll" (change)="onSelectAllChange($event, reportOption)" style="margin-left:5px;" class="custom-checkbox">Select All</mat-checkbox>

Example problem

Solution

  • This was how I was able to get it to work:

        ::ng-deep .mdc-label {
      font-size: 16px;
      font-family: Montserrat, sans-serif;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .5px;
   }