Cannot change mat-spinner's colour

Question

I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?

In addition, I've also tried the method suggested in the link but that doesn't work:

HTML

<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>

SCSS

.mat-spinner-color::ng-deep circle{
    stroke: #FFFFFF !important;
}

Thanks in advance!

Answer 1

::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.

As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

---

If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project

in styles.css

.orange-spinner circle{
  stroke:orange !important;
}

add class

<mat-spinner class="orange-spinner"></mat-spinner>

Stackblitz

https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css

---

Please note:

Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.

https://material.angular.io/guide/theming