CODEWITHSUNDEEP
angularangular-material
Anjali
Anjali

Reputation: 2708

change the button color of mat-spinner-button

I have a button spinner control on my page. It only comes with three colors: primary, accent, warn. I want a background button color that is the current color of my web page. I tried to change the color by using the stylesheet in styles.scss, but the color did not get changed

.spinner-button {
background-color: currentColor;

}

Below is the code in my HTML file:

 <mat-spinner-button  [options]="spinnerButtonOptions" (btnClick)="LoadData()" class="spinner-button" >
</mat-spinner-button>

Below are the options in my .ts class:

spinnerButtonOptions: MatProgressButtonOptions = {
    active: false,
    text: 'Load Data',
    spinnerSize: 18,
    raised: true,
    stroked: false,
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    buttonIcon: {
      fontIcon: '3d_rotation'
    }
  }

Below is the image :

enter image description here

I want the button color of Load Data to be green, #5B5B39; similar to other two button: "Start Loading" and "FTP"

Upvotes: 2

Views: 1029

Answers (1)

Prashant Pimpale
Prashant Pimpale

Reputation: 10717

You can override CSS and set ViewEncapsulation to None:

Component.css:

.mat-raised-button.mat-primary {
    background-color: red;
}

Component.ts:

import { Component, ViewEncapsulation } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation : ViewEncapsulation.None // Here
})

Here is the working demo:)

Upvotes: 3

Related Questions