Search results

Icons and Styles

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

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

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" IconCss="e-icons e-message">Message</EjsDropDownButton>
<EjsDropDownButton Items="@Items" IconCss="e-icons e-message" IconPosition="SplitButtonIconPosition.Top">Message</EjsDropDownButton>

@code {

public List<ItemModel> Items = new List<ItemModel>
{
    new ItemModel{ Text = "Edit" },
    new ItemModel{ Text = "Delete" },
    new ItemModel{ Text = "Mark as Read" },
    new ItemModel{ Text = "Like Message" },
};
}

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

Output be like

Button Sample

The Essential JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icons on the DropDownButton using the IconCss property.

Vertical button

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

@using Syncfusion.EJ2.Blazor.SplitButtons

<EjsDropDownButton Items="@Items" IconCss="e-icons e-message" CssClass="e-vertical">Message</EjsDropDownButton>

@code {

public List<ItemModel> Items = new List<ItemModel>
{
    new ItemModel{ Text = "Cut" },
    new ItemModel{ Text = "Copy" },
    new ItemModel{ Text = "Paste" }
};
}

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

</style>

Output be like

Button Sample

See Also