[Solved] BUG: Button in MVVM does not display icons

[Andrew]

According to the documentation, when working with MVVM templates, you should be able to add an icon to a button simply by adding the 'data-icon' attribute.

For example

            <button data-role="button"
                    data-icon="edit"
                    data-bind="visible: isVisible, enabled: isEnabled, events: { click: onClick }"
                    style="width: 180px">
                Click me
            </button>
 
It does not work. The button displays with the text, but there is a blank space where the icon should be.

Even in the  online example you can see there is no icon.

Here is a dojo link which also demonstrates that the icon does not appear.

https://dojo.telerik.com/?_gl=1*2jeqdz*_gcl_au*MTQ5MzMzNTEwOC4xNzg1MzkwMzczLjE0OTg4MTY0NDMuMTc5MDcyODgzOC4xNzkwNzI4ODQ0LjEwMzM3NjIzNTQuMTc5MDcyODgzOC4xNzkwNzI4ODQ0*_ga*MTAyOTE0MTY1NC4xNzg1MzkwMzcz*_ga_9JSNBCSF54*czE3OTA3Mjg2ODEkbzE3JGcxJHQxNzkwNzMxMTk1JGoyOCRsMCRoMA..

[Viktor Tachev]

Hi Andrew,

Thank you for reporting this to us.

The issue is caused by a misconfigured example rather than an actual bug in the Button component. There have been changes to the icon names, and it appears that the icon used in this example was not updated accordingly.

In this case, the data-icon attribute should have the value pencil. With this change, the icon is displayed as expected:

<button data-role="button"
		data-icon="pencil"
		data-bind="visible: isVisible, enabled: isEnabled, events: { click: onClick }"
		style="width: 80px">
	Click me
</button>

 

You can try the updated dojo for reference.

Thank you for bringing this to our attention. As a token of gratitude I have updated your Telerik points.

Regards,
Viktor Tachev
Progress Telerik