Currently you have two options - use a font generator service like Fontello to simplify the task, or prepare the icon, SVG and fonts manually.
is pretty straightforward - you pick the icons, choose the Unicode characters for them, type a font name and click Download. You'll get a zip file with the needed for mobile TTF and WOFF font formats (you won't need EOT as it targets only IE6-8, while the SVG font you can edit manually and convert again), which can be directly used for icons.
If you go the manual way, check these articles
about how you can create a SVG font using Inkscape
and then convert the font to TTF/WOFF, using Online Font Converter
or other similar service. Of course you will need the skills to create your desired icon with a vector editing software, like Inkscape or Adobe Illustrator (though if you go AI, you will have to export the icon to Inkscape as AI can't create SVG fonts).
After you have the two fonts (TTF/WOFF), you can load the font with this CSS:
src: url("images/MyCustomFont.woff") format("woff"),
Then you should override the Kendo UI font for the icons (all icons in this case, but you can alternatively override them one by one):
font: 1em/1em "MyCustomFont";
And last but not least, you will need a CSS rule for every icon you have:
Where mycustomicon is the icon name you've set in data-icon and \E03a is the Unicode character code for your icon (or you can use alphabet letters if you remap them instead).
I'll make sure all this information is added to our documentation.
The whole task is rather tedious, but the gain is that font icons look better on any types of screens, including retina ones.
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI