[icon] unknown property of button

[Chau]

Hello, I'd like to use the [icon] property of the <button> component:

 <button kendo-button [icon]="'save'">Save</button>

but I got this error at runtime:

zone.js:654 Unhandled Promise rejection: Template parse errors:
Can't bind to 'icon' since it isn't a known property of 'button'. ("               <tr>
                        <td>
                            <button kendo-button [ERROR ->][icon]="'save'">Save</button>
                        </td>
                    </tr>
"): ng:///Apps_Root/Apps/PricingConfig/app.html@29:49 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'icon' since it isn't a known property of 'button'. ("               <tr>
                        <td>
                            <button kendo-button [ERROR ->][icon]="'save'">Save</button>
                        </td>
                    </tr>

If I remove [icon] and use class="k-i-save", I dont get the runtime error but I dont get the floppy-disk icon next to the label Save.

<button kendo-button class="k-i-save">Save</button>

Could someone tell me how to resolve this [icon] property error?

Thanks!

 

[Dimiter Topalov]

Hi Chau,

The issue is caused by a typo in the kendoButton directive selector - the correct syntax is "kendoButton" instead of "kendo-button":

https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonDirective/

https://www.telerik.com/kendo-angular-ui/components/buttons/button/icons/

Here is a runnable example, demonstrating the Save button icon:

https://plnkr.co/edit/tjZW8Yh7KhwZi0YiCudH?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Chau]

Ahh, thanks!