ButtonIconPosition Enum

Lists values that specify the icon’s position within the button.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum ButtonIconPosition

Members

Name	Description
BeforeText	The icon is placed before the button’s text.
AfterText	The icon is placed after the button’s text.

Related API Members

The following properties accept/return ButtonIconPosition values:

• DxButtonBase.IconPosition
• DxEditorButton.IconPosition
• IButtonGroupItemInfo.IconPosition
• IDropDownButtonItemInfo.IconPosition

Remarks

The ButtonIconPosition enumeration values specify the position of the icon in a button. Use the IconPosition property to define the icon’s position.

Razor

<DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Accept" IconCssClass="accept" />
<DxButton RenderStyle="ButtonRenderStyle.Dark" Text="Email" IconCssClass="email" IconPosition="ButtonIconPosition.AfterText" />

CSS

.accept { 
    height: 18px;
    width: 18px;
    background-image: url("images/accept.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin: 0px 5px;
}
.email { 
    height: 18px;
    width: 18px;
    background-image: url("images/email.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin: 0px 5px;
}

Run Demo: Button — Icons