Checkbox border color styling in Angular material (md-checkbox)

Question

I am just wondering if there is any way to style md-checkbox like given below:

Codepen code for input checkbox

Note: I just wanna change the border color of the checkbox.

I have tried following way but didn't succeed :

SCSS

$dal-green: #45ba8e;
    .check{
    md-checkbox {
      border: 2px solid $dal-green; 
    }
    }

HTML :

     <div class="check"> 
<md-checkbox></md-checkbox>
</div>

I have searched online but no luck . If any body can give css to override the border color it would be great help. Thanks In advance.

Answer 1

Try this,

.check{
md-checkbox {
  border: 2px solid #009688; 
}
}

Answer 2

Try something like this :

md-checkbox .md-icon {
  border-color: green;
}

Answer 3

in new version you should use with underscore _md-icon:

        md-checkbox.md-checked ._md-icon {
         background-color: transparent;
        }


        md-checkbox ._md-icon {
        border-color: white;
        }