changing md-checkbox background color dynamically

[loykianos]

I need a way to dynamically change an md-checkbox's color depending on a value returned by a service. I tried ng-style but it doesn't seem to work. It changes the background-color of the md-checkbox element, but not of the actual checkbox container.

[loykianos]

I managed to do it, by adding an ng-style on the main element and a background-color: inherit on the md-checkbox icon.

[jaimegarcia]

I did it using in the html <md-checkbox class="dynamic-color-checkbox" md-colors="::{background: checboxColor}",

js:

$scope.checboxColor='red'

and then in the css:

.dynamic-color-checkbox ._md-icon{
  background-color:white!important;
}
.dynamic-color-checkbox.md-checked ._md-icon{
  background-color:inherit!important;
}

[sjlynch]

Worked well, but I had to add the following css to remove an artifact where a small rectangle of the color was showing to the right on the checkbox whether it was checked or unchecked. Css below:

md-checkbox.dynamic-color-checkbox {
    width:0px;
}

Only tested on Chrome with version v1.1.0-rc.5-master-7f01138