How to change AngularJS Material md-checkbox background-image when indeterminate?

Question

When the md-checkbox is in indeterminate state in Chrome, it appears as a dash. I want it to instead appear as a smaller opaque blue square inside of the checkbox for all browsers.

I have figured out how to specify the background image of the md-checkbox like so to draw the square:

style="background-image: linear-gradient(white, white 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, white 75%), linear-gradient(to right, white, white 25%, blue 25%, blue 75%, white 75%);"

Now how do I make that style apply only when the md-checkbox is indeterminate?

Answer 1

I figured it out. I put this CSS in my.styles.less file:

  md-checkbox.md-indeterminate .md-icon {
    color: rgba(0,0,0,0);
    background-image: linear-gradient(white, white 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, white 75%), 
      linear-gradient(to right, white, white 25%, rgb(61,163,244) 25%, rgb(61,163,244) 75%, white 75%);
  }