Angular Material - align mat-checkbox to the left

Question

I am trying to align <mat-checkbox> to the left of its container. By default it is indented. I tried to set negative left margin, it works, but the highlight circle is cropped.

I wonder if there is a solution for this issue. Here is the code I have so far:

properties.dialog.html:

<div class="form-field" *ngIf="control.type == 'TextInput'">
    <div class="label">{{ control.label }}</div>
    <mat-form-field>
        <input type="text" matInput [formControlName]="control.propertyName">
    </mat-form-field>
</div>

<ng-container *ngIf="control.type == 'CheckboxInput'">
    <mat-checkbox [formControlName]="control.propertyName">{{ control.label }}</mat-checkbox>
</ng-container>

properties.dialog.scss:

mat-checkbox {
    margin-left: -11px;
}

Answer 1

The Material Tab component is responsible for the cropping. It can be solved by setting a few styles.

::ng-deep .mat-mdc-tab-body-wrapper {
    overflow: visible !important;
}
::ng-deep mat-tab-body {
    overflow: visible !important;
}
::ng-deep .mat-mdc-tab-body-content {
    overflow: visible !important;
}