10

I am using angular 6 and angular material. i am using mat-stepper from angular material. want to change the mat-icon color for default, active and visited steps. Can anyone help with this please?

:host /deep/ mat-horizontal-stepper .mat-horizontal-stepper-header-container .mat-step-icon {
    background-color: "red" !important;
    color: #fff !important;
}

.mat-step-icon-selected,
.mat-step-icon-state-done,
.mat-step-icon-state-edit {
  background-color: "blue";
  color:#fff;
}

Also tried with this:

/deep/ mat-step-header.mat-horizontal-stepper-header > div.mat-step-icon-selected {
    background-color:'red';
}

But not working

THanks

mruanova
  • 6,351
  • 6
  • 37
  • 55
Mukil Deepthi
  • 6,072
  • 13
  • 71
  • 156
  • Try using `red` instead of `"red"` https://stackblitz.com/edit/angular-zgsxg4?file=app/stepper-overview-example.css – yurzui Feb 07 '19 at 14:23

5 Answers5

15

I am able to change the color to red with the following style in the styles.css file at the root of the project rather than the stylesheet of the component

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, 
.mat-step-header .mat-step-icon-state-edit {
    background-color: red !important;
    color: red !important;
}

to hide the numbers inside each step just use display none in the style of the class ng-star-inserted

.ng-star-inserted {display: none}
mruanova
  • 6,351
  • 6
  • 37
  • 55
  • Thats great it works. How to remove the numbers inside the circle i.e the icon itself. i tried the below. but changes only for edit. not sure what is the other names like 'done', 'edit',... – Mukil Deepthi Feb 07 '19 at 14:33
  • I modified my answers to answer your question on how to remove the numbers inside the circle. – mruanova Feb 07 '19 at 14:37
  • thanks. but this shrinks the whole control as soon i added the ng-start... – Mukil Deepthi Feb 07 '19 at 14:42
  • I am sure you will figure it out yourself now that I showed you how to make changes in the styling of the angular material stepper, thanks :) – mruanova Feb 07 '19 at 14:45
  • 1
    Thank you. This was so useful to me. – Dev Enock Mar 17 '22 at 18:26
  • the problem with this approach is that the browser will paint it first in the default color then turn it to the color red that you chose, so if the rendering is very slow then you would be able to see the change in the color, but normally it wouldn't. – mruanova Mar 17 '22 at 20:41
3

I have tried to use @mruanova's answer and i is great but i only want to make the step red when it is selected.

If you want to apply the red color only when the step is selected, use the below css on the parent style file:

    .mat-step-icon-selected {
    background-color: red !important;
    color: red !important;
}
Bereket Tolcha
  • 51
  • 1
  • 6
2

You can override the iconset directly in your HTML.

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>

It even works with font awesome:

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <i class="fa fa-check-circle"></i>
    </ng-template>
    <ng-template matStepperIcon="active">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="done">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="number">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
</mat-horizontal-stepper>

For changing colors and other customizations please check https://stackoverflow.com/a/66428028/4184651

Evan MJ
  • 1,967
  • 13
  • 16
1

Solution with Style on Component (using View Encapsulation)

Roughly the same as @mruanova but using view encapsulation so the styles can be on the component e.g. a-stepper.component.css:

/**
    Change color of stepper icon to green, when completed.
    - NOTE: requires 'encapsulation: ViewEncapsulation.None' in component definition
 */
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
    background-color: green !important;
}

View Encapsulation on component:

@Component({
    selector: 'a-stepper',
    templateUrl: './a-stepper.component.html',
    styleUrls: ['./a-stepper.component.css'],
    providers: [{
        provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
    }],
    encapsulation: ViewEncapsulation.None
})
export class AStepperComponent implements OnInit {

Note: also my css is slightly different as only affects the background as I was putting a green tick rather than the edit with primary coloring.

Simon Legg
  • 216
  • 2
  • 3
-1

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit { background-color: #673ab7; color: #fff; }

Théo T. Carranza
  • 7,813
  • 1
  • 21
  • 14