Adjusting Icon Colors in Kendo UI for Angular Stepper
Environment
| Product | Progress® Kendo UI for Angular Stepper |
Description
I want to use custom SVG icons in the Kendo UI for Angular Stepper and ensure their colors dynamically adapt to the Stepper's styling for each state of the steps.
This Knowledge Base article also answers the following questions:
- How to customize the colors for SVG icons in the Stepper?
- How to dynamically style the icons in the Stepper steps based on their current state?
- What CSS or SCSS methods are available to style Stepper icons?
Solution
To adjust the color of the SVG icons in the Stepper steps, you can use either CSS or SCSS customization methods.
Using CSS
You can control the color of icons in the Stepper steps dynamically based on their state (default, current, completed) using some suitable CSS selectors. To achieve this, apply the following CSS rules that target the icons of the steps in each state:
/* For the current step icon */
.k-step.k-step-current .k-step-indicator {
color: green;
}
/* For completed step icons */
.k-step.k-step-done .k-step-indicator {
color: purple;
}
/* Default icon color */
.k-step .k-step-indicator {
color: cyan;
}Using SASS Variables
The Kendo UI themes provide built-in Sass variables to modify the colors of Stepper icons in each state. If you prefer to change the icons' colors through Sass variables, update the following variables in your SCSS file:
$kendo-stepper-indicator-text: cyan; // Default icon color
$kendo-stepper-indicator-current-text: green; // Current step icon color
$kendo-stepper-indicator-done-text: purple; // Completed step icon color