Icons in Blazor Dropdown Menu Component

9 Mar 20222 minutes to read

Dropdown Menu can have an icon to provide the visual representation of the action. To place the icon on a Dropdown Menu, set the IconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the Dropdown Menu. You can customize the icon’s position using the IconPosition property.

In the following example, the Dropdown Menu with default iconPosition and iconPosition as Top is showcased:

@using Syncfusion.Blazor.SplitButtons

<SfDropDownButton IconCss="e-icons e-message" content="Message">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Edit"></DropDownMenuItem>
        <DropDownMenuItem Text="Delete"></DropDownMenuItem>
        <DropDownMenuItem Text="Mark as Read"></DropDownMenuItem>
        <DropDownMenuItem Text="Like Message"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>
<SfDropDownButton IconCss="e-icons e-message" IconPosition="SplitButtonIconPosition.Top" Content="Message">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Edit"></DropDownMenuItem>
        <DropDownMenuItem Text="Delete"></DropDownMenuItem>
        <DropDownMenuItem Text="Mark as Read"></DropDownMenuItem>
        <DropDownMenuItem Text="Like Message"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

<style>
    .e-message::before {
        content: '\e7cb';
    }
</style>

Blazor DropDownMenu with Icon

You can also use third party icons on the Dropdown Menu using the IconCss property.

Vertical button

Vertical button in Dropdown Menu can be achieved by adding e-vertical class using CssClass property.

@using Syncfusion.Blazor.SplitButtons

<SfDropDownButton IconCss="e-icons e-message" CssClass="e-vertical" Content="Message">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

<style>
    .e-message::before {
        content: '\e7cb';
    }
</style>

Changing Blazor DropDownMenu Position in Vertical

See Also