New to Telerik UI for Blazor? Download free 30-day trial

SplitButton Icons

This article describes how to use icons inside the SplitButton component.

Icon Parameters

The SplitButton provides four parameters and five different ways to add an icon to its main button and all secondary action items:

The string parameters below exist for both TelerikSplitButton and SplitButtonItem.

Parameter Intended Usage
Icon Use with the built-in Telerik Font and SVG icons, or with custom CSS classes.

It is also possible to define any icon or image with custom HTML markup inside the <SplitButtonContent> and <SplitButtonItem> tags. Use this aproach for images and font icons that rely on specific rendering. One such example is the Google Material Icons library.


Using icons in the Blazor SplitButton

<TelerikSplitButton Icon="@("sln")">
    <SplitButtonContent>Telerik Icon</SplitButtonContent>
        <SplitButtonItem Icon="@FontIcon.Table">Telerik Font Icon</SplitButtonItem>
        <SplitButtonItem Icon="@SvgIcon.Calculator">Telerik SVG Icon</SplitButtonItem>
        <SplitButtonItem Icon="@CustomIconClass">Custom Icon</SplitButtonItem>
        <SplitButtonItem> <TelerikLoader /> Custom markup </SplitButtonItem>

    /* Third-party icon libraries should provide these styles out-of-the-box. */

    .my-icon {
        width: 1em;
        height: 1em;
        font-size: 16px;
        background: purple;

@code {
    string CustomIconClass { get; set; } = "my-icon";

Next Steps

See Also

In this article