MD-checkbox Angular material design

Question

Using Angular materials with Angular4, I cannot find a way to change the color of the checkbox after validation.

The only way I could change the style in its original form is:

:host /deep/ .mat-checkbox-inner-container{
     height:15px;
     width:15px; 
     background-color: rgba(0, 255, 0, 0.87);
}

Trying to change the style after checking, the following did not work:

:host /deep/ .mat-checkbox-checked {
background-color:yellow;   
}

It is actually applied after verification, but in the wrong element - it does not apply in the inner container.

Something :host /deep/ .mat-checkbox-inner-container-checkeddoesn't seem to work.

Any help is appreciated.

Answer 1

Try the following :)

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: rgb(27, 142, 241) !important;
}

.mat-ripple-element {
  background: rgba(27, 142, 241, .4) !important;
}

Answer 2

Try using .md-checkbox.md-checkedContact Checkbox Element>,

:host /deep/ .md-checkbox.md-checked .md-icon {
   background-color:yellow!important;   
}