How to modify angular-material2 mat-checkbox left icon size and color?

Question

angular material2 mat-checkbox

How do I modify the left icon size, and the left icon state color?

<mat-checkbox>Like Me.</mat-checkbox>

Answer 1

You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox

.mat-checkbox-inner-container {
  height: 50px!important;
  width: 50px!important;
}

Note that you need to put the style modification in styles.css root folder ( /src/styles.css ) and not in the components css.

Also put !important ( width: 50px!important; ) to override the default style.

Below is the default style for the mat-checkbox

.mat-checkbox-inner-container {
    display: inline-block;
    height: 20px;
    line-height: 0;
    margin: auto;
    margin-right: 8px;
    order: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    width: 20px;
    flex-shrink: 0;
}

Hope this helps.