8 Answers, 1 is accepted
The provided CSS styles should work. You even don't need all of them, and some of the !important clauses can be removed if you use an additional :hover selector:
SVG backgrounds work as well, I tested with latest Chrome, Firefox and IE11:
The problem on your side may be caused by the browser version or browser settings.
I am using the latest version of browsers. What kind of browser setting do you have in mind? I am using svg icons in a different part of my application and they work just fine.
I did not have any specific setting in mind, this was "food for thought". For example, Internet Explorer has various security settings, which can prevent certain features from working. Chrome and Firefox have loads of internal settings, which are accessible by advanced users, etc.
Does my demo with the SVG background image work on your side? If yes, then you have no problems with SVG images, but with CSS styles. I am pretty sure that you have already double checked that the image exists at the expected location and the URL is correct, so the only thing, which comes to mind is CSS specificity.
Try removing some stylesheets (leave the Kendo UI ones + the SVG-related CSS rules) and see what happens.
If your research does not isolate the cause of the problem, then send me a runnable example for inspection.
I tried your code example, it work very well on PC with Chrome, but it doesn't work on an Ipad with Chrome too.
On Ipad, on DateTimePicker load, it display the up arrow that is on the top left on your file sprite.png. So the .k-i-calendar class is not considered. Then after a mouse over (finger over on Ipad !) the class .k-i-calendar:hover is well considered and the good icone is displayed. Strange, not ?
You can try it with an Ipad and your example: http://dojo.telerik.com/USEXE
Do you have a solution ?
Kendo UI icons use a different sprite image for retina displays. This can be easily tracked down if you inspect the datepicker's icon in emulated device mode in Google Chrome (see the screenshot).
In this particular case, the correct icon on iPads is not displayed because of the !important clause that you are using for the background position.
You have two options:
1. Enforce your non-retina icon on retina displays by using higher specificity, which overrides the retina styles.
2. Use a separate CSS rule with a media query (similar to ours) with a different icon for retina displays.
I tried your first solution and it works !