Thanks for the suggestion, but it will be a breaking change to do something like that as I suppose there are already some customers that have extended the original predefined icons sprites with some custom solutions. Changing the sprite and CSS positions will affect them badly.
As an alternative I could suggest you to create a few custom sprites and CSS files, that you could use in your projects instead the original predefined icons styles and sprite. If you use in your code custom solution and not the predefined, the 30kb sprite will not be loaded and will not make the request heavier.
I suggested two different ways for embedding the icons. In all cases, you should prepare a sprite image. Then you have set class names related to the images in the sprite, and to group them and set the url to the sprite, that all these classes will use. Next step will be to define the background-positions for each icon and you are ready to use your new predefined icons. Just replace PrimaryIconCssClass="rbAdd"
" where the original embedded RadButton Predefined icond is replace form the new custom cbHtml class defining Custom Button Html icons. You could use the PrimaryIconTop
properties to position the icon inside the button, or respectively SecondaryIconTop
if you have SecondaryIconCssClass
The other suggested way is almost the same, but it predefine the icon position in the button directly form the custom css file. That will save some extra code lines. In the sample project, the CSS class used for this method is called: .cbMediaCssOnly.
Attached is a sample project: button-custom-icons.zip
which contains a sprite with five icons only and the size is 3.14 KB. The attached customicons.gif
shows the result.
Creating similar sprite and CSS will take a few minutes only, but you will have the desired result.
the Telerik team