Changing the Icon Position and Add Two or More Icons in a Button

Updated on Jun 24, 2026

Environment

Product

Button for Blazor

Description

This KB article answers the following questions:

• How can I show an icon in a Telerik UI for Blazor Button on the right side of the text instead of on the left side?
• How can I display an icon Button on the top and bottom side of the text?
• How can I include more than one icon in the Button?

Solution

You can change the icon position and add more icons in the Button by using the following approaches:

• To display multiple icons in one Button, nest the TelerikIcon in the TelerikButton content.
• To control the position of the icon in relation to the text content of the Button, use CSS.

Reposition the Button icon and add more than one icon to the component

Example

View Source

@*This button has two icons, one on the left and one on the right side of the text*@
<TelerikButton Class="two-icons">
    <TelerikSvgIcon Icon="@SvgIcon.InfoCircle" />
    Info
    <TelerikSvgIcon Icon="@SvgIcon.InfoCircle" />
</TelerikButton>

@* This button has an icon above the text. *@
<TelerikButton Class="icon-top" Icon="SvgIcon.InfoCircle">Info</TelerikButton>

@* This button has an icon below the text. *@
<TelerikButton Class="icon-bottom" Icon="SvgIcon.InfoCircle">Info</TelerikButton>

<style>
    .two-icons {
        height: 50px;
    }

    .icon-top {
        flex-wrap: wrap;
        width: 50px;
        height: 50px;
    }

    .icon-bottom {
        flex-wrap: wrap-reverse;
        width: 50px;
        height: 50px;
    }
</style>