This is a migrated thread and some comments may be shown as answers.

Custom icons

3 Answers 301 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jan
Top achievements
Rank 1
Jan asked on 02 Jun 2017, 06:42 AM

Hello,

 

in the Telerik-Widgets you often use the "k-icon" class. It's a font based way to display icons.

We have a customer who is using IE11 and all PCs of them has policies, that disables the download of external fonts for security reasons. I now need a way to replace the icon with svgs (i.e. the new font awesome 5 svg framework). One way would be to write a script that always scans the DOM and replaces the k-icon with a svg object. But I think it would be better to define it as template, to prevent extra load by scripts. Is there any 'clean' way at the moment to solve this without scripts?

3 Answers, 1 is accepted

Sort by
0
Orlin
Telerik team
answered on 06 Jun 2017, 07:00 AM
Hello Jan,

All Kendo UI font icons have the k-icon class which contains the WebComponentsIcons font declaration, the size of the icons, and the common properties of all icons; every icon has a k-i- class containing the code of the specific glyph as a content definition set to the :before pseudo-element. You could try remove the .k-icon font declaration and the .k-i- glyph declaration for the specific icons you need, and then setting the SVGs as a background-image.

I hope this is a viable alternative for you.


Regards,
Orlin
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jan
Top achievements
Rank 1
answered on 06 Jun 2017, 07:19 AM

Thank you for your answer.

It is no option for me to use the SVG as background-image, because there is no way to change the fill-color of a background SVG (which works in IE, Firefox and Chrome). It would be really great if I could i.e. overwrite the Icon-Templates or if you use SVGs in the future (maybe the new FontAwesome5). So I wouldn't have to scan the document and replace the icons with SVG and can achieve a better app-performance.

0
Orlin
Telerik team
answered on 09 Jun 2017, 06:39 AM
Hello Jan,

I am afraid this is the only option I can come up with. Everything else will require altering the source .js files generating the widgets' markup, and that would be a serious challenge.

At this time I am not aware of any plans for switching the icons to SVGs but you can submit a feature request at our feedback portal (http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback). If the item accumulates enough votes, it will be taken into consideration for future releases.

I can not give you an answer regarding Font Awesome 5 either but if it proves to be very popular and a commonly requested feature by our customers, I am sure there will be information on using it with Kendo UI in some way.


Regards,
Orlin
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Jan
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Jan
Top achievements
Rank 1
Share this question
or