Looking for Stepper icons

2 Answers 41 Views
Stepper
Karen
Top achievements
Rank 2
Iron
Karen asked on 20 Jul 2021, 03:52 PM

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");
        })
    )

 

 

2 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 23 Jul 2021, 10:43 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Karen
Top achievements
Rank 2
Iron
commented on 23 Jul 2021, 01:27 PM

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.
0
Karen
Top achievements
Rank 2
Iron
answered on 23 Jul 2021, 01:28 PM
Thanks
Tags
Stepper
Asked by
Karen
Top achievements
Rank 2
Iron
Answers by
Eyup
Telerik team
Karen
Top achievements
Rank 2
Iron
Share this question
or