How to change color of angular material stepper step icons











up vote
2
down vote

favorite












In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.










share|improve this question






















  • I guess you can change it using theming.
    – SiddAjmera
    Nov 8 at 18:01















up vote
2
down vote

favorite












In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.










share|improve this question






















  • I guess you can change it using theming.
    – SiddAjmera
    Nov 8 at 18:01













up vote
2
down vote

favorite









up vote
2
down vote

favorite











In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.










share|improve this question













In the angular material stepper component, each step is represented by an icon in a circle. The background color of this circle is set to whatever the theme's primary color is. Is it possible to change this color to the theme's accent color? I tried setting color="accent" on both the mat-horizontal-stepper component and each mat-step component, but neither one had any effect and I don't see a color input in the documentation.







angular angular-material material-design






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 8 at 17:56









Henry Phelps

374




374












  • I guess you can change it using theming.
    – SiddAjmera
    Nov 8 at 18:01


















  • I guess you can change it using theming.
    – SiddAjmera
    Nov 8 at 18:01
















I guess you can change it using theming.
– SiddAjmera
Nov 8 at 18:01




I guess you can change it using theming.
– SiddAjmera
Nov 8 at 18:01












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.



 ::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}


::ng-deep is deprecated and can be removed, also can be used



ViewEncapsulation.None in component decorator to avoid using ::ng-deep



Update with solution to problem



html file example



 <div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name"
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>




create theme.scss file and add it to styles in angular.json



 "styles": [
"src/styles.css",
"src/theme.scss"
]


note stepper will take color of primary color



theme.scss



 @import '~@angular/material/theming';
@include mat-core();

.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);

$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

@include angular-material-theme($yellow-theme);
}


Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.






share|improve this answer























  • This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
    – Henry Phelps
    Nov 8 at 20:12










  • If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
    – Nenad Radak
    Nov 8 at 21:10










  • Is there a way to alter the theme for just mat-stepper-theme?
    – Henry Phelps
    Nov 9 at 15:02











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53213544%2fhow-to-change-color-of-angular-material-stepper-step-icons%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote



accepted










There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.



 ::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}


::ng-deep is deprecated and can be removed, also can be used



ViewEncapsulation.None in component decorator to avoid using ::ng-deep



Update with solution to problem



html file example



 <div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name"
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>




create theme.scss file and add it to styles in angular.json



 "styles": [
"src/styles.css",
"src/theme.scss"
]


note stepper will take color of primary color



theme.scss



 @import '~@angular/material/theming';
@include mat-core();

.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);

$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

@include angular-material-theme($yellow-theme);
}


Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.






share|improve this answer























  • This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
    – Henry Phelps
    Nov 8 at 20:12










  • If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
    – Nenad Radak
    Nov 8 at 21:10










  • Is there a way to alter the theme for just mat-stepper-theme?
    – Henry Phelps
    Nov 9 at 15:02















up vote
1
down vote



accepted










There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.



 ::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}


::ng-deep is deprecated and can be removed, also can be used



ViewEncapsulation.None in component decorator to avoid using ::ng-deep



Update with solution to problem



html file example



 <div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name"
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>




create theme.scss file and add it to styles in angular.json



 "styles": [
"src/styles.css",
"src/theme.scss"
]


note stepper will take color of primary color



theme.scss



 @import '~@angular/material/theming';
@include mat-core();

.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);

$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

@include angular-material-theme($yellow-theme);
}


Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.






share|improve this answer























  • This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
    – Henry Phelps
    Nov 8 at 20:12










  • If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
    – Nenad Radak
    Nov 8 at 21:10










  • Is there a way to alter the theme for just mat-stepper-theme?
    – Henry Phelps
    Nov 9 at 15:02













up vote
1
down vote



accepted







up vote
1
down vote



accepted






There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.



 ::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}


::ng-deep is deprecated and can be removed, also can be used



ViewEncapsulation.None in component decorator to avoid using ::ng-deep



Update with solution to problem



html file example



 <div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name"
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>




create theme.scss file and add it to styles in angular.json



 "styles": [
"src/styles.css",
"src/theme.scss"
]


note stepper will take color of primary color



theme.scss



 @import '~@angular/material/theming';
@include mat-core();

.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);

$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

@include angular-material-theme($yellow-theme);
}


Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.






share|improve this answer














There does not seem to be option to change color of mat stepper icon, you can use this css as workaround.



 ::ng-deep .mat-step-header .mat-step-icon-selected {
background-color: red;
}


::ng-deep is deprecated and can be removed, also can be used



ViewEncapsulation.None in component decorator to avoid using ::ng-deep



Update with solution to problem



html file example



 <div class="yellow-theme"> <----- wrapper theme class
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-
linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name"
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>




create theme.scss file and add it to styles in angular.json



 "styles": [
"src/styles.css",
"src/theme.scss"
]


note stepper will take color of primary color



theme.scss



 @import '~@angular/material/theming';
@include mat-core();

.yellow-theme {
$yellow-theme-primary: mat-palette($mat-yellow, 400);
$yellow-theme-accent: mat-palette($mat-yellow, 400);

$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent);

@include angular-material-theme($yellow-theme);
}


Custom theme class can be used across application,just wrapp any material component and use color attribute primary,accent or warn as defined in class.
Component that is wrapped in custom class wil use that color, if not color are set from global theme.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 9 at 16:08

























answered Nov 8 at 19:18









Nenad Radak

5442213




5442213












  • This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
    – Henry Phelps
    Nov 8 at 20:12










  • If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
    – Nenad Radak
    Nov 8 at 21:10










  • Is there a way to alter the theme for just mat-stepper-theme?
    – Henry Phelps
    Nov 9 at 15:02


















  • This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
    – Henry Phelps
    Nov 8 at 20:12










  • If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
    – Nenad Radak
    Nov 8 at 21:10










  • Is there a way to alter the theme for just mat-stepper-theme?
    – Henry Phelps
    Nov 9 at 15:02
















This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
– Henry Phelps
Nov 8 at 20:12




This is what I feared, thanks. Not sure why they let you change the color of some things and not others.
– Henry Phelps
Nov 8 at 20:12












If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
– Nenad Radak
Nov 8 at 21:10




If your using custom created themes,maybe this can also help you github.com/angular/material2/blob/master/src/lib/stepper/…
– Nenad Radak
Nov 8 at 21:10












Is there a way to alter the theme for just mat-stepper-theme?
– Henry Phelps
Nov 9 at 15:02




Is there a way to alter the theme for just mat-stepper-theme?
– Henry Phelps
Nov 9 at 15:02


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53213544%2fhow-to-change-color-of-angular-material-stepper-step-icons%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()