Custom icons

4 posts, 0 answers
  1. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 02 Jun 2017 Link to this post

    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?

  2. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 06 Jun 2017 Link to this post

    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.
  3. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 06 Jun 2017 Link to this post

    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.

  4. Orlin
    Admin
    Orlin avatar
    62 posts

    Posted 09 Jun 2017 Link to this post

    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.
Back to Top