New to Kendo UI for jQuery? Start a free 30-day trial

SetIcons

methods

Registers icon overrides globally or per component. The active iconType determines whether the override is rendered as an SVG or font icon.

Overrides can be applied globally (affecting all components) or scoped to a specific component type. When scoped to a component, only instances of that component will use the overridden icon.

setIcons

Parameters:dictionaryObject

An object whose keys are either icon names (for global overrides) or component names (for component-scoped overrides). Each value can be:

A string — the replacement icon name. In SVG mode it can reference a built-in Kendo UI SVG icon; in font mode it is used as the font icon name.
An SVG icon object with the following fields:
- name - The icon identifier (String).
- viewBox - The SVG viewBox attribute value (String), e.g. "0 0 24 24".
- content - The SVG markup content (String), e.g. "<path d='M8 5l8 7-8 7'/>".
A nested object mapping icon names to strings or SVG icon objects (for component-scoped overrides).

<script>
    kendo.setIcons({
        "chevron-right": "arrow-right"
    });
</script>

<script>
    kendo.setIcons({
        grid: {
            "chevron-right": "arrow-right"
        },
        menu: {
            "chevron-right": "caret-alt-right",
            "chevron-down": "caret-alt-down"
        }
    });
</script>

<script>
    kendo.setIcons({
        grid: {
            "chevron-right": {
                name: "grid-chevron",
                viewBox: "0 0 24 24",
                content: '<path d="M8 5l8 7-8 7"/>'
            }
        }
    });
</script>

<script>
    kendo.setIcons({
        // Global override - applies to all components
        "plus": {
            name: "custom-plus",
            viewBox: "0 0 24 24",
            content: '<path d="M12 2v20M2 12h20"/>'
        },
        // Component-scoped override - applies only to Grid
        grid: {
            "filter": {
                name: "grid-filter",
                viewBox: "0 0 24 24",
                content: '<path d="M3 4h18l-7 8v6l-4 2V12L3 4z"/>'
            }
        }
    });
</script>