title: How to style a mat-checkbox properly
body: <p>I am attempting to style a mat-checkbox (material2) according to the following requirements:</p>
  
  <p>A black, always visible border (regardless of checked status) (#0000000)</p>
  
  <p>When checked, the "tick" will be white(#ffffff), on a coloured(teal) background (border still visible)</p>
  
  <p>When unchecked, the background(inside the border) of the checkbox should be off-white (#dddddd). </p>
  
  <p>So far, I have been able to set the border color, but when checked, it disappears, behind the teal color</p>
  
  <p>I can set the unchecked background color, but again, the black border disappears when I do this. If I remove this setting, the border appears, but the background color is wrong.</p>
  
  <p>The scss properties I am setting are as follows:</p>
  
  <pre><code>::ng-deep .mat-checkbox .mat-checkbox-frame {
      border-color: mat-color($darkPrimary, darker); //black
    }
  
  ::ng-deep .mat-checkbox-background {
      background-color: mat-color($darkPrimary, 200); //off-white
  }
  </code></pre>
  
  <p>It seems that whatever I set the background as, overwrites the border style. Additionally, when I change the state of the checkbox, the black border briefly appears, then disappears again. How do I fulfil these requirements?</p>