New to Kendo UI for Angular? Start a free 30-day trial

Step Appearance

The Stepper provides a number of options for customizing the appearance of its steps.

To control the styling, use the following approaches for setting the steps:

Indicator icon
Indicator text
Current step
Optional step
Disabled step
Templated step

Indicator Icon

Depending on the configuration of the project, you can enhance the content of the step by displaying any of the following icon types:

SVG icons
Font icons
Third-party library icons

Displaying SVG Icons

To display an SVG icon inside the step, set the svgIcon property to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

html

<kendo-stepper [steps]="steps"> </kendo-stepper>

import { userIcon } from '@progress/kendo-svg-icons';

public steps: StepperStep[] =[{text:'Profile', svgIcon: userIcon}]

The following example demonstrates how to set the svgIcon property of the Stepper step.

Change Theme

Theme

Loading ...

Displaying Font Icons

To display a Font icon inside the Stepper:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
Depending on the font icons library, you can:
- set the icon property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.
  ts
```
public steps: StepperStep[] =[{text:'Profile', icon: 'user'}]
```
- set the iconClass property to a third-party font icon library (such as FontAwesome).
  ts
```
public stepsCustomIcons = [{ label: "Personal Info", iconClass: "fa fa-users fa-fw" }]
```
- use the stepper indicator template for any other font icon library (for example showing Google Material Icons).
  html
```
<ng-template kendoStepperIndicatorTemplate let-step>
    <span class="material-icons">{{ step.icon }}</span>
</ng-template>
```

The following example demonstrates how to set the icon, and iconClass properties of the Stepper step, including Google Material Icons integration.

Change Theme

Theme

Loading ...

Indicator Text

The Stepper allows you to display custom text inside the step indicators instead of the default numeric one.

Change Theme

Theme

Loading ...

Current Step

To specify the current step of the Stepper, use the currentStep option. The property supports a two-way binding which is provided by the currentStepChange event.

When the user navigates to a step and activates it either by mouse click or with the keyboard, the Stepper emits a preventable activate event. If prevented, the currentStep will remain unchanged.

Change Theme

Theme

Loading ...

Optional Step

You can also mark a step as optional by using the optional property. If set to true, the step will have an Optional label rendered under its indicator.

Change Theme

Theme

Loading ...

Disabled Step

The Stepper allows you to mark a step as disabled through the disabled property. Users can focus disabled steps through the keyboard navigation but these steps cannot be activated.

Change Theme

Theme

Loading ...

Step Template

For more information about the step templates, refer to the article on the Stepper templates.