spriteCssClass is not working with Icons in latest version?

[Alex]

My code is like this because I want to have a button with search icon so :

 $("#tcOptions").kendoButton({
        spriteCssClass: "k-icon k-i-search",
        click: onOptionsBtnClick
    });

 

but the browser generated my button into something with k-sprite in front of my css like this :

<span class="k-sprite k-icon k-i-search"></span> will not show icon

 

Consequently nothing is showing unless I manually remove this k-sprite from my button css in HTML:

<span class=" k-icon k-i-search"></span> will show icon

 

Btw, it is not working since I upgraded my kendoUI into this version Kendo UI v2017.1.223 

Any help? Thanks,

<span class="k-sprite k-icon k-i-search"></span>

<span class="k-sprite k-icon k-i-search"></span>

 

[Ivan Danchev]

Hello Alex,

Since the introduction of font icons in Kendo R1 2017 you can use the icon option instead of the spriteCssClass one, for example:

$("#button").kendoButton({
    icon: "k-icon k-i-search"
});

Through icon the integrated font icons are used instead of setting the span element's background image as the spriteCssClass did in previous releases. spriteCssClass adds the k-sprite class to the span element and default Kendo styles are applied to that element through that class.
Even though using the icon option is recommended in the latest release the spriteCssClass option can still be used (instead of icon) in the newer versions (R1 2017 onward), but custom styles would need to be added so that the desired image is set as a background.

Regards,
Ivan Danchev
Telerik by Progress

[Frank]

Hi Ivan, 

Can you provide some code if we want to keep the spirteCssClass option? Its used in a bunch of places and I would prefer not having to change everything to icon

Thanks

[Ivan Danchev]

Hi Frank,

Here's a dojo example that shows how to set and display the search icon using the Silver theme's sprite image. 

Regards,
Ivan Danchev
Telerik by Progress

[Frank]

Hi Ivan,

Thanks for the link, it works but looks a bit tedious to implement, so I've gone back and decided on the other approach.

I've changed all spriteCssClass property to icon property in my app via a mass text replace in my Javascript files, changing spriteCssClass: "k-icon to icon: "k-icon .

It looks like this worked in most places, but there are still a few places where the image isn't showing or looking weird (looks like its loading from a sprite.png from a different theme). 

Any ideas why this might be? I just got too many instances of spriteCssClass to go through them one by one.

Thanks,

[Ivan Danchev]

Hello Frank,

I cannot say with certainty since I am not sure which particular widgets you have issues with after replacing spriteCssClass with icon, but have in mind that at present not all widgets have the icon configuration option. This thread's original subject is the Button, which does have an icon option but the Menu's items for instance currently do not have it, thus replacing their spriteCssClass option with icon will not produce the desired result.

Regards,
Ivan Danchev
Telerik by Progress

[Lorena]

Hello, this worked for me.

 

items.Add().Text("<span class=\"k-icon k-i-pencil\"></span> HOME").Encoded(false);

[Ivan Danchev]

Hello Lorena,

This approach is straightforward and does not require applying custom CSS classes to the item and associating CSS rules with them. Thank you for posting it.

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hello, 

Since problem described here is similar to one I am posting here, but if I should start separate topic, please let me know.

We recently upgraded to latest version (2018.2.620) from old one (2016.2.504). On most places all widgets are ok, but in certain place, my tree view widget doesn't display icons on command buttons (command: ["edit", 'destroy']). When I manually overwrite current (latest) kendo.common.min.css on the server, icons are displayed, but wrong icon is displayed on edit button (chevron up I think). Also, on the same column, i have some classes applied on attrbutes, but headerAttributes are applied while attributes are not.

 

This is code for the column:

{
title: "edit",
attributes: {
'class': 'c-centered'
},
headerAttributes: {
'class': 'k-header c-centered'
},
command: ["edit", 'destroy'],
width: 135,
locked: true
}

Thanks

[Ivan Danchev]

Hello Vedad,

You mentioned having issue with the TreeView's icons, however the TreeView does not have command configuration. The TreeList widget, which also displays hierarchical data, does have such configuration and allows showing command buttons. If you are having issues with the TreeList's icons please open a new thread in its forum section or submit a support ticket with product TreeList.

Regards,
Ivan Danchev
Progress Telerik

[Vedad]

Hi Ivan,

you are right, what i meant it was TreeList, it was typo on my side as I am working on TreeView as well.

 

Thanks for the help.
Best regards