Icons and separator in Blazor Split Button component

4 Nov 20252 minutes to read

Split Button icons

Blazor Split Button can have an icon to provide the visual representation of the action. To place the icon on a Split Button, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the Split Button. The icon’s position can be customized by using the IconPosition property.

@using Syncfusion.Blazor.SplitButtons

<SfSplitButton Content="Paste" IconCss="e-icons e-paste">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>
<SfSplitButton Content="Paste" IconCss="e-icons e-paste" IconPosition="SplitButtonIconPosition.Top">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>

<style>
    .e-paste::before {
        content: '\e739';
    }
</style>

Blazor SplitButton with Icon

Third-party or custom icons can also be applied by assigning the appropriate class name to the IconCss property. Ensure the corresponding icon font or stylesheet is referenced in the application.

Vertical button

A vertical layout for the Split Button can be achieved by adding the e-vertical class via the CssClass property. This stacks the icon and text vertically within the primary button.

@using Syncfusion.Blazor.SplitButtons

<SfSplitButton Content="Paste" IconCss="e-icons e-paste" CssClass="e-vertical">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut" ></DropDownMenuItem>
        <DropDownMenuItem Text="Copy" ></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>

<style>
    .e-paste::before {
        content: '\e739';
    }
</style>

Blazor SplitButton in Vertical

Separator

Separators are horizontal lines used to group items in the popup menu. Separators are non-selectable and serve only as visual dividers. Enable a separator between items by setting the Separator property to true on a DropDownMenuItem.

@using Syncfusion.Blazor.SplitButtons

<SfSplitButton Content="Paste" IconCss="e-icons e-paste" CssClass="e-vertical">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Separator="true"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>

<style>
    .e-paste::before {
        content: '\e739';
    }
</style>

Blazor SplitButton with Separator

See Also