title: How i can make a material checkbox filled in gray when is not checked?
body: <p>I'm trying to fill a <a href="https://material.angular.io/components/checkbox/overview" rel="nofollow noreferrer">Angular Material Checkbox</a> with a <code>background-color: gray</code> when is not checked, and when it is checked, fill with <code>background-color: red</code>.</p>
  <p>This is what i have been tried:</p>
  <pre><code>mat-checkbox:not(.mat-checkbox-checked) .mat-checkbox-layout .mat-checkbox-background {
    background-color: #C3C3C3;
  }
  
  mat-checkbox.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background {
    background-color: red
  }
  </code></pre>
  <p>This way is working like i expect, but when i check/descheck is showing a white background and the animation don't seems to work so good.</p>
  <p><a href="https://stackblitz.com/edit/angular-hcn28z" rel="nofollow noreferrer">My stackblitz demonstration</a></p>