Change md-checkbox color

Question

So it looks I can change the background-color of an empty md-checkbox by doing :

md-checkbox .md-icon {
background: red;
}

But I can't manage to change the background of a checked md-checkbox. I tried to play with :checked, ::before, ::after... But didn't succeed.

How should I proceed ?

Answer 1

You need to use theme class as well as md-checked class combination in order to define selector with higher specificity. For example:

md-checkbox .md-icon {
    background: red;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: orange;
}

And of course, avoid using !important, this is a sign that something is wrong with your styles.