Components: mat-spinner color

[iamimbohacker]

Bug, feature request, or proposal:

Please add directive to apply color (hex, rgb, whatever) to the mat-spinner. existing color that applies theming sucks. My primary, accent and warn colors are have their specific colors and I want to make spinner white in speficic place. why i can do that?

What is the expected behavior?

directive to mofidy COLOR of circle using HEX

What is the current behavior?

You can only apply theme colors (primary. accent. warn)

[crisbeto]

It doesn't make sense to have a directive for this, because changing the color is trivial using CSS. You can use this selector to change the color:

.mat-spinner circle {
  stroke: #fff;
}

[mikeTmw]

The suggestion from @crisbeto does not seem to work if View Encapsulation is on Emulated (and I imagine Native as well) due to trying to pierce the ShadowDOM to access the SVG. The only solution I found is to use:

.mat-spinner::ng-deep circle {
  stroke: #fff;
}

However, ng-deep is deprecated (as are all deep selectors at the browser level) so I do not believe this is a sustainable solution.

[Radivarig]

To set dynamically:

<mat-progress-spinner [ngStyle]="spinnerStyle" ...

```ts
get spinnerStyle() { return {color: } }

```css
.mat-progress-spinner::ng-deep circle {
  stroke: currentColor;
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>