Icons

The Telerik UI for ASP.NET Core Stepper provides to option to configure the icon of each Step.

Step Icon

By default the Stepper displays the number of each step in the indictor element of the Step. The Step icon can be configured via the steps.icon configuration property to an existing icon in the Kendo UI theme sprite. For a list of available icons, refer to the Web Font Icons article.

Example

The following example demonstrates how to configure different icons.

Razor

    @(Html.Kendo().Stepper()
        .Name("stepper")
        .Steps(s =>
        {
            s.Add().Label("First Step").Icon("home");
            s.Add().Label("Second Step").Icon("paperclip");
            s.Add().Label("Last Step").Icon("save");
        })
    )

Razor

    <kendo-stepper name="stepper">
        <steps>
            <step label="First" icon="home"></step>
            <step label="Second" icon="paperclip"></step>
            <step label="Third" icon="save"></step>
        </steps>
    </kendo-stepper>

See Also

• Icons of the Stepper HtmlHelper for ASP.NET Core (Demo)