CODEWITHSUNDEEP
angular-material2
langwan
langwan

Reputation: 121

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

angular material2 mat-checkbox

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

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

Upvotes: 12

Views: 19998

Answers (5)

davecar21
davecar21

Reputation: 2674

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.

Upvotes: 19

nks
nks

Reputation: 662

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

Hope this css will resolve your issue

Upvotes: 3

Dmytro K.
Dmytro K.

Reputation: 169

In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:

body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
  height: 16px;
  width: 16px;
}

body .mat-checkbox-ripple, body .mat-radio-ripple {
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

Upvotes: 0

Vishesh
Vishesh

Reputation: 832

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;
}

Upvotes: 14

Jaume J.
Jaume J.

Reputation: 83

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

Upvotes: 2

Related Questions