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

SplitButton Icons

Updated over 6 months ago

The <TelerikSplitButton> and <SplitButtonItem> provide an Icon parameter that allows you to add an icon to the main button and all secondary action items.

The Icon parameter type is object and it accepts:

A property of the static SvgIcon class
A member of the FontIcon enum
A string that is a CSS class for a custom icon

Make sure to register font-icons.css if using Telerik font icons.

How to use icons in Telerik Blazor SplitButton

<TelerikSplitButton Icon="@SvgIcon.Table">
    <SplitButtonContent>SVG Icon</SplitButtonContent>
    <SplitButtonItems>
        <SplitButtonItem Icon="@FontIcon.Calculator">Font Icon</SplitButtonItem>
        <SplitButtonItem Icon="@CustomIconClass">Custom Icon</SplitButtonItem>
        <SplitButtonItem> <TelerikLoader /> Custom Markup </SplitButtonItem>
    </SplitButtonItems>
</TelerikSplitButton>

<style>
    .my-icon {
        /* define a background image or a custom font icon here */
        background: purple;
        /* dimensions and other base styles will usually come from another class */
        width: 1em;
        height: 1em;
        font-size: 16px;
    }
</style>

<!-- Load this stylesheet only if using Telerik font icons -->
<link href="https://blazor.cdn.telerik.com/blazor/11.3.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />

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

Best Practices for Custom Icons and Images

You can add custom icons and images through additional markup inside the <SplitButtonContent> and <SplitButtonItem> tags. Use this approach for images and font icons that rely on specific rendering. One such example is the Google Material Icons library.
Images used as icons should generally be small enough to fit in a line of text. The primary button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options:
- Define a Class for the button that provides height and width. The width and height can be set to auto or to a value in px. When using a static value, it must be sufficient to accommodate the icon.
- Adding your own HTML inside the <SplitButtonContent>, something like: <SplitButtonContent><img style="width: 400px; height: 400px;" src="my-icon.svg" />some text</SplitButtonContent>

SplitButton Icons

Best Practices for Custom Icons and Images

See Also