Customize Mat-checkbox Indeterminate icon

Question

Default Icon for MatCheckbox Indeterminate is like below:

I want to customize it to look like this:

Answer 1

Add this code to your styles.css:

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  border: 2px solid #757575;
  background: #68d0e5;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  padding: 30%;
}

Here's a working example: https://angular-ve9hge-zjec5e.stackblitz.io