KendoUI Mobile Tip: Add Data Icon anywhere within ListView Item

In Kendo UI Mobile’s ListView demo, the “data-icon” attribute is added to each list item element, in order to create an icon image from Kendo UI’s standard set of icons:

<ul>
    <li data-icon=”toprated”><a>Boston</a></li>
    <li data-icon=”toprated”><a>Chicago</a></li>
</ul>

The example above positions the toprated icon on the left side; what if you want to position them somewhere else or even dynamically?  Initially I tried to add the data icon to the far right by putting it on a simple span tag.  This doesn’t work though:

<ul>
     <li>
         <a>Boston</a><span data-icon=”toprated”></span>
     </li>
</ul>

Using Firebug, I noticed that “data-icon” renders as two class elements: class=”km-icon km-toprated”

After some experimentation, it’s clear that “km-icon” creates the icon and “km-[icon name]” states which icon to use (in this case: toprated, which looks like a star).  Applying this logic, the fixed up example is:

<ul>
     <li>
         <a>Boston</a><span class="km-icon km-toprated"></span>
     </li>
</ul>

I hope in a future release that adding icons to elements will work on a wider variety of elements, but for now, this works.