Angular Material: mat-checkbox vertical alignment of checkbox

Question

I can't seem to override the defaults to vertically align the checkbox relative to the checkbox label. Searched for a while but nothing has worked. See example image:

Should be like:

Have tried the following:

.mat-checkbox-inner-container {
    margin: none;
}

HTML:

<label><b>Home Type</b></label>
    <mat-checkbox>Entire place<br><small class="text-muted">Have a place to yourself</small></mat-checkbox>
    <mat-checkbox>Private room<br><small class="text-muted">Have your own room and share some common spaces</small></mat-checkbox>
    <mat-checkbox>Shared room<br><small class="text-muted">Stay in a shared space, like a common room</small></mat-checkbox>

Answer 1

Similar to Craig's answer but as a descendant of .mat-checkbox.mat-accent to spare the need of using "!important"

.mat-checkbox.mat-accent .mat-checkbox-inner-container {
    margin: 2px 8px auto 0;
}

or using sass/less

.mat-checkbox.mat-accent {
   .mat-checkbox-inner-container {
      margin: 2px 8px auto 0;
   }
}

Answer 2

Just run into the same problem. I used the following to solve it (unfortunately needs the dreaded !important):

.mat-checkbox-inner-container {
  margin: 2px 8px auto 0 !important;
}

I found I had to adjust the top margin (2px in this case) to get the layout beside the label to look correct.

Answer 3

I was able to achieve this (I'm using Angular/Material 7.x) by resetting the margins the checkbox container uses.

Note that I have had to apply an additional translateY to account for the box's border-width, and reset the wrap on the label so the text doesn't try to stay on one line.

your.component.scss

:host {
  ::ng-deep {
    .mat-checkbox-inner-container {
      margin-top: initial;
      margin-bottom: initial;
      transform: translateY(2px); // value of checkbox border-width
    }
    .mat-checkbox-label {
      white-space: normal; // wrap label text
    }
  }
}

StackBlitz Fiddle