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>

Solution 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.

Solution 2

If you want to change color then use these in your CSS file

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: black;
}

::ng-deep .mat-checkbox-checked .mat-checkbox-background {
  background-color: black !important;
}

Solution 3

    ::ng-deep .mat-checkbox-checkmark-path {
     stroke: #000 !important;
   }

Hope this css will resolve your issue

Solution 4

to change styles use classes and define them in your scss component file.

When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.

The size of the icons is defined by the font-size not width / height

Hope I helped you

View more solutions

Comments

[davecar21]

this could work but note that using :host /deep/ is deprecated. for more info please read this link . angular.io/guide/component-styles#deprecated-deep--and-ng-de‌​ep

[Cammy]

Why do you a have to use this in the main css?

[davecar21]

@Cammy In that way we can be able to override the style of the checkbox.

[nks]

You can add your color for stroke property, its working for me!!

[andreisrob]

@Cammy Research "View Encapsulation" for clarity