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.

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.

Example

Using icons in the Blazor SplitButton

@* Usage of Font and SVG Icons in the SplitButton. *@

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

Next Steps

See Also

In this article