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

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: