RadEditor Ribbon Bar - Custom Button Icon Not Displaying

[Emin Sadigov]

I'm experiencing an issue with custom button icons not displaying in the RadEditor ribbon bar. I've added a custom button that functions correctly, but the icon specified in the ImageUrl property does not appear on the UI.

Issue Details:

I've added the following custom tool to the RadEditor toolbar:

xml
<tool name="File" size="large" text="File Add" ImageUrl="~/Assets/images/add.png"/>

The button appears in the ribbon bar and the functionality works as expected, but the icon is not visible.

Troubleshooting Steps Already Taken:

1. Verified the image exists at the specified path
2. Tried both relative (~/) and absolute paths
3. Checked for case sensitivity in the ImageUrl attribute (tried both ImageUrl and imageUrl)
4. Specified width and height attributes for the image

Questions:

1. Is there any specific requirement or setting I'm missing for custom icons in the ribbon bar?
2. Could there be an issue with how custom icons are rendered in the ribbon bar versus standard toolbar?
3. Are there any size limitations or format requirements for custom icons in the ribbon?
4. Is there a different approach recommended for adding custom icons to ribbon bar buttons?

 

[Rumen]

Hi Emin,

Please examine the following demo where the editor has a ribbonbar toolbar with custom tools and font icons: MS Word-like Experience. 

The icons in the Lightweight RenderMode are added via font icons and CSS, as shown in the styles.css file in the demo: https://demos.telerik.com/aspnet-ajax/editor/examples/ms-word-like-experience/styles.css.

You can read more on the subject in the following article (scroll down to Examples 7 and 8): http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/buttons/set-button-state#lightweight-rendermode.

 

Regards,
Rumen
Progress Telerik