New to Telerik UI for Blazor? Download free 30-day trial

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


Product Button for Blazor


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?


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

@*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" />
    <TelerikSvgIcon Icon="@SvgIcon.InfoCircle" />

@* 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>

    .two-icons {
        height: 50px;

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

    .icon-bottom {
        flex-wrap: wrap-reverse;
        width: 50px;
        height: 50px;
In this article