DxFormLayoutGroup.HeaderIconUrl Property

Specifies the URL of the group header’s icon.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string HeaderIconUrl { get; set; }

Property Value

Type	Default	Description
String	null	The URL of the icon.

Remarks

The following code snippet assigns icons to group headers:

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6" HeaderIconUrl="/images/book.svg">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@FirstName" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
            <DxTextBox @bind-Text="@LastName" />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Personal Information" ColSpanMd="6" HeaderIconUrl="/images/info.svg">
        <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
            <DxTextBox @bind-Text="@Position" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Notes:" ColSpanMd="12">
            <DxTextBox @bind-Text="@Notes" />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

Refer to Icons for more information.