steps.iconTemplate String|Function

The template used to render the icon in the Stepper step.

The fields which can be used in the template are:

• title String - the title set on the step
• label String - same as title - the title set on the step
• icon String - the icon specified for this step (if any)
• enabled Boolean - indicates whether the step is enabled (true) or disabled (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

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "ONE",
            content: "Step 1 Content"
        }, {
            title: "TWO",
            content: "Step 2 Content",
            iconTemplate: "<strong>#:title#</strong>"
        },{
            title: "THREE",
            content: "Step 3 Content"
        }]
    });
</script>

Example - Use a function

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "ONE",
            content: "Step 1 Content"
        }, {
            title: "TWO",
            content: "Step 2 Content",
            iconTemplate: function(e) {
                return '<strong>' + e.title + '</strong>';
            }
        },{
            title: "THREE",
            content: "Step 3 Content"
        }]
    });
</script>