This is a migrated thread and some comments may be shown as answers.

Icon on Right of Text

2 Answers 42 Views
Button
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Bob asked on 09 Apr 2021, 07:31 PM

Is there any way to make the icon appear to right of the text instead of the left?

I have tried messing with css to get this work, but as of now, have not had much luck.

Would be nice if there was an IconPosition Setting on the button.

2 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 09 Apr 2021, 07:56 PM

Never mind I figured it out with the css, but a setting would still be nice.

For those interested, I added a class to the button called iconRight and then added the following scss:

button.iconRight {
    flex-direction: row-reverse;
 
    span.k-icon {
        margin: 0 -8px 0 8px;
    }
}
0
Hristian Stefanov
Telerik team
answered on 14 Apr 2021, 05:50 PM

Hi Bob,

The easiest way to do that is by adding the TelerikIcon nested in the TelerikButton content. This way you can change the position of the icon however you want.

The example snippet below demonstrates how to achieve that. It showcases two icons added on both sides of the text in the button.

<TelerikButton>
    <TelerikIcon Icon="check-outline" />
    Check it
    <TelerikIcon Icon="check-outline" />
</TelerikButton>

Also, after your question, I have created this knowledge base article for changing icons position in a button and adding more than one icon inside, where anyone interested can see more details related to this case.

Regards,
Hristian Stefanov
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.

Tags
Button
Asked by
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Bob
Top achievements
Rank 1
Iron
Veteran
Iron
Hristian Stefanov
Telerik team
Share this question
or