Search code examples
angularangular-material

Angular Material 12 Mat-Spinner color

I want to dynamically change the color of mat-spinner in my typescript code. For some reason my code is not working anymore. The code below shows how it was working. I need help.

spinnerStyle() {
    return { stroke: mycustomcolor };
}
 <mat-progress-spinner
      diameter="30"
      mode="determinate"
      strokeWidth="7"
      [ngStyle]="spinnerStyle()"
    >
</mat-progress-spinner>

Solution

  • Disabling the Spinner stroke from the root works. Its a bit hacky but easy.

    ::ng-deep mat-progress-spinner.spinner-color > svg > circle {
  stroke: unset !important;
}
    <mat-progress-spinner
      diameter="30"
      mode="determinate"
      [ngStyle]="spinnerStyle()"
      class="spinner-color"
    >
</mat-progress-spinner>