Data-icons not displaying outside of Layout

Thread is closed for posting
2 posts, 1 answers
  1. Nikolaus
    Nikolaus avatar
    6 posts
    Member since:
    Mar 2017

    Posted 24 Apr 2017 Link to this post

    It seems that I can only use the built-in data icons from Kendo UI in my mobile app on my layout page. The navigation menu, defined in the layout page, uses the data icons and they work.

    <div data-role="tabstrip" id="navigation-container">
       <a href="components/home/view.html" data-icon="home"><span class="navigation-link-text" data-bind="text: strings.home.title"></span></a>



    But when I try to use data icons in any other page/view in my app, they don't show up. It seems like the tag isn't even recognized, and therefore the icons aren't added in by the Kendo JS/CSS.

    For example, I try this:

    <div id="globe" data-icon="globe"></div>

    And when I load the view and inspect the page, I see that it is left exactly like that, instead of adding in the <span> to display the data-icon.

    It should add the following inside my div: <span class="km-icon km-home"></span>. But it is not happening.

  2. Answer
    Anton Dobrev
    Anton Dobrev avatar
    609 posts

    Posted 26 Apr 2017 Link to this post

    Hello Nikolaus,

    Indeed, the Kendo UI hybrid icons are supported in the button widgets (tab strip included) and in the ListView items. More information can be read here.

    Continuing on this you can add manually the icon span to your elements that are not part of a Kendo UI widget as for example:

    <div id="globe"><span class="km-icon km-globe"></div>

    I hope this helps.

    Anton Dobrev
    Telerik by Progress

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top