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

Adding Multiple Icons to a Kendo UI Button

Environment

Product Progress® Kendo UI® for jQuery
Version 2024.4.1112

Description

I want to add two icons into a Kendo UI Button using the iconClass. How can I achieve this?

This knowledge base article also answers the following questions:

  • How to use SVG icons in a Kendo UI Button?
  • How to customize the icon layout in a Kendo UI Button?
  • How to append multiple elements to a Kendo UI Button?

Solution

To add multiple icons to a Kendo UI Button, follow these steps:

  1. Create custom CSS to adjust the width of the icons container to accommodate two icons.

    /* Double width for icons in button */
.two-icons {
 width: 32px;
}

  2. Initialize the Kendo UI Button with the custom iconClass that references the CSS class created.

    $("#button").kendoButton({ 
 iconClass: "two-icons",
});

  3. Create two SVG icons using the kendo.ui.icon method.

    var icon = kendo.ui.icon({ icon: 'zoom-in', type: 'svg' });
var icon2 = kendo.ui.icon({ icon: 'x-circle', type: 'svg' });

  4. Append the created icons to the button using jQuery's append method.

    $("button span.two-icons").append([ icon, icon2 ]);

For a practical demonstration, refer to the following Progress Kendo UI Dojo example which showcases the above steps.

See Also

In this article
Related articles
Not finding the help you need? Improve this article