Completed
Last Updated: 13 Mar 2024 13:16 by ADMIN
Michael D
Created on: 21 Jun 2022 12:12
Category: Toolbar
Type: Feature Request
0
Custom icons in toolbar buttons/splitButtons

Currently, the Kendo UI Toolbar supports adding icons to items by setting the "icon" property as documented here. However, only Kendo's own icons are supported.

In other widgets (like the Grid), adding custom icons (to a toolbar!) is already possible by specifiying an icon class.

However, if you wanted a third-party icon (or one of your own) directly to a standalone Toolbar, you would need to create a whole new template from scratch or replace the DOM element after rendering or use some hacky approach like demonstrated in this DOJO. While the first one means a lot of work, the latter ones are both not very stable.

Therefore, I propose to extend the icon support for Toolbars in general. I can think of two different solutions:

  1. Let the developer specify an icon class (like in the Grid) that is then written into the DOM.
  2. Let the developer specify some sort of "content template" that is displayed e.g. in a button or a splitButton. This way any content may be displayed in a toolbar item and this also allows for more complex and customized styling regarding the layout of e.g. icon and text.
5 comments
ADMIN
Martin
Posted on: 13 Mar 2024 13:16

Hello, Michael,

Here you will find how you can add FontAwesome iconsusing the itemTemplate in the Toolbar. Could you please let me know if that would work for you?

If you have a different configuration, kindly provide a Dojo example so that I can investigate further.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Michael D
Posted on: 12 Mar 2024 06:47

First, let me apologize for the late reply.

I can confirm that the itemTemplate works as expected. However, this setting is missing in the TS type definition which is why I did not see it initially.

I still have not found a built-in solution for displaying custom icons in buttons, though (which is the other half of my feature request).

Please consider reopening this ticket.

ADMIN
Martin
Posted on: 07 Feb 2023 15:54

Hello, Michael,

Please check this example and let me know if it works as expected.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Michael D
Posted on: 01 Feb 2023 07:57

It is true that the SplitButton widget does support templates via the itemTemplate option. However, this option is not configurable when using the SplitButton inside a toolbar (The according item.menuButtons option does not allow itemTemplates).

Am I missing something?

ADMIN
Martin
Posted on: 28 Jun 2022 06:13

Hello, Michael,

As of the last release, the Toolbar uses the standalone SplitButton widget, which exposes the configurations you mentioned. Here you can check our Icons Demo for the possible ways to add an icon to the widget. It also supports a itemTemplate option.

Let me know if you need any further help.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.