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 :
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\n\n.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, \n.mat-step-header .mat-step-icon-state-edit {\n background-color: red !important;\n color: red !important;\n}\n\n\nto hide the numbers inside each step just use display none in the style of the class ng-star-inserted\n\n.ng-star-inserted {display: none}\n",
2019-02-07T14:24:18
Bereket Tolcha :
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.\n\nIf you want to apply the red color only when the step is selected, use the below css on the parent style file:\n\n .mat-step-icon-selected {\n background-color: red !important;\n color: red !important;\n}\n",
2019-09-03T16:54:36
Evan MJ :
You can override the iconset directly in your HTML.\n<mat-horizontal-stepper>\n <!-- Icon overrides. -->\n <ng-template matStepperIcon="edit">\n <mat-icon>account_circle</mat-icon>\n </ng-template>\n <ng-template matStepperIcon="active">\n <mat-icon>account_circle</mat-icon>\n </ng-template>\n <ng-template matStepperIcon="done">\n <mat-icon>account_circle</mat-icon>\n </ng-template>\n <ng-template matStepperIcon="number">\n <mat-icon>account_circle</mat-icon>\n </ng-template>\n</mat-horizontal-stepper>\n\nIt even works with font awesome:\n<mat-horizontal-stepper>\n <!-- Icon overrides. -->\n <ng-template matStepperIcon="edit">\n <i class="fa fa-check-circle"></i>\n </ng-template>\n <ng-template matStepperIcon="active">\n <i class="fa fa-dot-circle-o"></i>\n </ng-template>\n <ng-template matStepperIcon="done">\n <i class="fa fa-dot-circle-o"></i>\n </ng-template>\n <ng-template matStepperIcon="number">\n <i class="fa fa-dot-circle-o"></i>\n </ng-template>\n</mat-horizontal-stepper>\n\nFor changing colors and other customizations please check https://stackoverflow.com/a/66428028/4184651",
2021-03-01T19:04:05
Simon Legg :
Solution with Style on Component (using View Encapsulation)\n\nRoughly the same as @mruanova but using view encapsulation so the styles can be on the component e.g. a-stepper.component.css:\n\n/**\n Change color of stepper icon to green, when completed.\n - NOTE: requires 'encapsulation: ViewEncapsulation.None' in component definition\n */\n.mat-step-header .mat-step-icon-state-done,\n.mat-step-header .mat-step-icon-state-edit {\n background-color: green !important;\n}\n\n\nView Encapsulation on component:\n\n@Component({\n selector: 'a-stepper',\n templateUrl: './a-stepper.component.html',\n styleUrls: ['./a-stepper.component.css'],\n providers: [{\n provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}\n }],\n encapsulation: ViewEncapsulation.None\n})\nexport class AStepperComponent implements OnInit {\n\n\nNote: 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.",
2020-04-03T10:10:24