Unplanned
Last Updated: 07 Jan 2022 11:14 by ADMIN
Pieter
Created on: 05 Nov 2021 14:35
Type: Feature Request
0
Icon position on a Button
Probably solvable with some custom styling, but it would be very handy to have a prop indicating where an icon should be rendered on a Button (start/end probably). Is something like this already requested somewhere (I couldn't find it)?
5 comments
ADMIN
Konstantin Dikov
Posted on: 09 Nov 2021 13:39

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/.

Pieter
Posted on: 09 Nov 2021 06:50
Probably due to a lack in my CSS skills, but could you provide an example on how to push the icon to the right? I can't get it to work...
Pieter
Posted on: 09 Nov 2021 06:38

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">
This isn't mentioned in both the documentation (on the site) as in the intellisense. Could this at least be improved a bit?
Pieter
Posted on: 09 Nov 2021 06:01
Please change it to a feature request, thanks!
ADMIN
Konstantin Dikov
Posted on: 08 Nov 2021 05:29

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.