DxButtonBase.IconPosition Property

Specifies the icon’s position.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(ButtonIconPosition.BeforeText)]
[Parameter]
public ButtonIconPosition IconPosition { get; set; }

Property Value

Type	Default	Description
ButtonIconPosition	BeforeText

A ButtonIconPosition enumeration value.

Available values:

Name	Description
BeforeText

The icon is placed before the button’s text.

| | AfterText |

The icon is placed after the button’s text.

Remarks

Connect an icon library to your project to add an icon to a button component. Use the IconPosition property to specify the icon’s position. Assign the icon’s CSS class to the IconCssClass property.

DevExpress Blazor components support pre-defined icon sets (such as Iconic or Bootstrap-recommended libraries) and custom icon libraries. Refer to the following topic for additional information: Icons.

Razor
CSS

razor

<DxButton RenderStyle="ButtonRenderStyle.Dark" 
          Text="Undo" Title="Undo the last action." 
          IconCssClass="undo" />
<DxButton RenderStyle="ButtonRenderStyle.Dark" 
          Text="Redo" 
          Title="Restore the previously undone action." 
          IconCssClass="redo" 
          IconPosition="ButtonIconPosition.AfterText" />

css

.undo {
    width: 16px;
    height: 16px;
    background-image: url("../images/undo.svg");
    margin: 0 8px 0 0;
}
.redo {
    width: 16px;
    height: 16px;
    background-image: url("../images/redo.svg");
    margin: 0 0 0 8px;
}

Leave the Text property empty to show an icon without text.

Run Demo: Button — Icons