Customized Materialize Checkboxes

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="normalize@3.0.3" data-semver="3.0.3" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" />
    <link data-require="materializecss@0.96.1" data-semver="0.96.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="materialize-custom.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <div class="container">
      <h4 class="indigo-text text-darken-2">Customized Materialize Checkbox Colors</h4>
      <div class="divider"></div>
      <br />

      <div class="card white-text darken-2 container">
        
        <!-- form -->
        <form action="#" class="p-b-1card-content">
          <h5 class="center indigo-text"> {{ question }} </h5>
          
          <p>
            <input
              type="checkbox"
              class="checkbox-indigo"
              id="test5" />
            <label for="test5">Red</label>
          </p>
          <p>
            <input
              type="checkbox"
              id="test6"
              class="checkbox-indigo"
              checked="checked" />
            <label for="test6">Yellow</label>
          </p>
          <p>
            <input
              type="checkbox"
              class="checkbox-indigo filled-in"
              id="filled-in-box" 
              checked="checked" />
            <label for="filled-in-box">Filled in</label>
          </p>
          <p>
            <input
              type="checkbox"
              class="checkbox-indigo"
              id="indeterminate-checkbox" />
            <label for="indeterminate-checkbox">Indeterminate Style</label>
          </p>
          <p>
            <input
              type="checkbox"
              id="test7"
              class="checkbox-indigo"
              checked="checked"
              disabled="disabled" />
            <label for="test7">Green</label>
          </p>
            <p>
              <input
                type="checkbox"
                class="checkbox-indigo"
                id="test8"
                disabled="disabled" />
              <label for="test8">Brown</label>
          </p>

        </form>

        
      </div>
      
    </div>
  </body>

</html>

// Code goes here

angular.module('app', []);

angular.module('app').controller('mainCtrl', ['$scope', function($scope){

  $scope.question = "Question 1";
  
  
}]);

/* Styles go here */

/* Styles go here */

.trans-bg {
  transition: background 0.25s;
}
.btn-circle {
  border-radius:100%;
}
.flex-vcontainer,
.flex-conainer-center,
.flex-container-around,
.flex-container-between {
  display:flex;
}
.flex-vcontainer {
  flex-direction:column;
  flex-wrap: wrap;
}
.flex-container-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flex-container-around {
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.flex-container-between {
  justify-content: space-between;
  align-items: center;
  align-content: center;
}


.flex-item {
  flex: 0 1 auto;
}
.flex-item-grow {
  flex: 1 1 auto;
}
.flex-item-full {
  flex: 1;
}
.flex-item-center{
  align-self: center;
}


/* height + width classes */
.fullheight{height:100%}.screenheight{height:100vh}.height-5{height: 5rem}.height-10{height: 10rem}.height-20{height: 10rem}.height-30{height: 30rem}
.fullwidth{width:100%}.screenwidth{width:100vw}

/* cursors */
.pointer {
  cursor: pointer;
}

/* helpers */
.m-a-1{margin:1rem;}.m-b-1{margin-bottom:1rem;}
.p-a-1{padding:1rem;}.p-b-1{padding-bottom:1rem;}


angular.module('app').directive('myClick', function($parse){
  return {
    link: function(scope, el, attrs) {
      var fn = $parse(attrs['myClick']);
      
      el.on('click', function(){
        
        scope.$apply(function(){
          fn(scope);
        });
      });
      
    }
  }
});





.checkbox-indigo[type="checkbox"] + label:before{
  border: 2px solid indigo;
  background: transparent;
}
.checkbox-indigo[type="checkbox"]:checked + label:before{
  border: 2px solid transparent;
  border-bottom: 2px solid indigo;
  border-right: 2px solid indigo;
  background: transparent;
}
.checkbox-indigo.filled-in[type="checkbox"] + label:after{
  border: 2px solid indigo;
  background: transparent;
}
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:after{
  background: indigo;
}
.checkbox-indigo.filled-in[type="checkbox"]:checked + label:before{
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}