Hi Pieter,
Your observations are correct and using both icon and iconClass is not supported, because both serve the same purpose - specifying the icon that should be used. The iconClass should be used for font icons:
With the iconClass you can add a font icon and some additional class name for further customization. Nevertheless, here is an example that use the "className" property of the button for adding additional class name:
<Button className="myButton" icon="refresh">
KendoReact font icon
</Button>,
And the CSS:
.k-button.myButton span, .k-button.myButton img{ right: 3px; position: absolute; } .k-button.myButton{ padding-right: 20px; }
As for the feature request, please give a vote for the item, so it can get higher priority.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Adding both an icon and an iconClass is not supported, I looked into the sourcecode (Button.tsx, the "iconElement" function) and the iconClass property is ignored when specifying an icon. I was expecting that this code would work:
<Button primary icon="arrow-chevron-right" iconClass="something">
Hi Pieter,
I have gone through our feedback portal and public issues, but I couldn't find any feature request for the icon position. Here is a link to the public feedback portal, where you can create a feature request for this (or if you prefer, I could change this ticket to a feature request directly):
As for a temporary solution, using the iconClass for rendering a specific icon could also be used for adding custom CSS for changing the position and the appearance of the button.
Please let me know if you prefer for me to change this ticket to a feature request directly.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.