Angular Material mat-spinner custom color

Question

Does anyone know how can I change mat-spinner color in Angular Material? Overriding css doesn\'t work. I tried changing color in material files but they can only be imported

Answer 1

Sample Color, strokeWidth, diameter and title

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>

Answer 2

Color is build in.

Theming The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.

https://material.angular.io/components/progress-spinner/overview

example

<mat-spinner color="warn"></mat-spinner>

Answer 3

This is best achieved by doing a custom theme.

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

Answer 4

To your .css/.scss component file style add (it will works locally - in component only)

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}

Answer 5

use this code

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}

Answer 6

If you don't want to mess around with the global css and need a way to set the spinner to different colors in different areas of your app, I would strongly recommend to create a directive for it.

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{

  @Input() color: string;

  constructor(
    private elem: ElementRef
  ){}

  ngAfterViewInit(){
    const element = this.elem.nativeElement;
    const circle = element.querySelector("circle");
    circle.style.stroke = this.color;
  }

}

Then the spinner should work like this:

<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>