steps.iconTemplate String|Function

The template used to render the icon in the indicator of the step.

The fields which can be used in the template are:

• label String - the label set on the step
• icon String - the icon specified for this step (if any)
• successIcon String - the successIcon specified for this step (if any)
• enabled Boolean - indicates whether the step is enabled (true) or disabled (false)
• error Boolean - indicates whether the step has error (true) or not (false)
• selected Boolean - indicates whether the step is selected
• previous Boolean - indicates whether the step is before the currently selected or not
• index Number - a zero-based index of the current step
• isFirstStep Boolean - indicates whether the step is the initial one in the Stepper
• isLastStep Boolean - indicates whether the step is the last one in the Stepper
• indicatorVisible Boolean - indicates whether the indicator, which holds the icon should be displayed or not
• labelVisible Boolean - indicates whether the label section of the step should be displayed or not

Example - Use a string template

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: "<strong>#:label#</strong>"
        },{
            label: "THREE"
        }]
    });
</script>

Example - Use a function

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: function(e) {
                return '<strong>' + e.label + '</strong>';
            }
        },{
            label: "THREE"
        }]
    });
</script>