Data-icons not displaying outside of Layout

[Nikolaus]

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>

</div>

 

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.

[Anton Dobrev]

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.

Regards,
Anton Dobrev
Telerik by Progress