DxFormLayoutGroup.HeaderIconCssClass Property

Specifies the CSS class of a Form Layout group header’s icon.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
String	null	The CSS class name.

Remarks

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 more information: Icons.

The code below uses the HeaderIconCssClass property to add Open Iconic icons to Form Layout group headers:

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" HeaderIconCssClass="oi oi-book" ColSpanMd="6">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Work Information" HeaderIconCssClass="oi oi-info" ColSpanMd="6">
        <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Notes:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>