Looking for Stepper icons

[Karen]

Hello, I'm looking at the Stepper component e.g. (from a Telerik code sample and can't seem to find choices for icons.

I have looked at the documentation which points to web fonts but they don't seem right as I pasted in one or two of the icon names and get a blank step.

Thanks for any insight where to find a list of icon names to use in the Stepper.

@(Html.Kendo().Stepper()
        .Name("stepper")
        .Orientation(StepperOrientationType.Horizontal)
        .Label(Model.Label)
        .Indicator(Model.Indicator)
        .Steps(s =>
        {
        
            s.Add().Label("Begin").Icon("home");
            s.Add().Label("Second").Icon("attachment").Error(true);
            s.Add().Label("Third").Selected(true);
            s.Add().Label("Fourth").Icon("user");
            s.Add().Label("111");
            s.Add().Label("Done").Icon("save");
        })
    )

 

 

[Eyup]

Hello Karen,

 

Thank you for writing to us.

You are correct, here is the list with the icons:
https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

Test this definition in your project:

@(Html.Kendo().Stepper()
        .Name("stepper")
        .Linear(false)
        .Orientation(StepperOrientationType.Horizontal)
        .Steps(s =>
        {
            s.Add().Label("Personal Info").Icon("user");
            s.Add().Label("Education").Icon("dictionary-add");
            s.Add().Label("Experience").Icon("flip-vertical").Selected(true);
            s.Add().Label("Attachments").Icon("attachment");
            s.Add().Label("Review").Icon("preview").Enabled(false);
            s.Add().Label("Submit").Icon("file-add");
            s.Add().Label("Begin").Icon("home");
            s.Add().Label("Second").Icon("attachment").Error(true);
            s.Add().Label("Third").Selected(true);
            s.Add().Label("Fourth").Icon("user");
            s.Add().Label("111");
            s.Add().Label("Done").Icon("save");
        })
    )

On my side all Icons are appearing as expected.

Feel free to test it and let me know if it works for you, too.

 

Regards,
Eyup
Progress Telerik

[Karen]

What would help is to refine your docs on this to explain say if you want .k-i-checkmark-circle then use checkmark-circle for instance. Any ways thanks for your assistance.

[Karen]

Thanks