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 icons.
IconClass Use with third-party font icons, which rely only on CSS classes for their rendering, and not on text content (see the tip after this table).
SpriteClass Use with image sprites. Apply background-image and background-position styles to the set CSS class.
ImageUrl Use with images, which are not sprites or font icons. The SplitButton will render an HTML <img> tag with the set URL.

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

<TelerikSplitButton Icon="sln">
    <SplitButtonContent>Telerik Icon</SplitButtonContent>
    <SplitButtonItems>
        <SplitButtonItem IconClass="bi-bluetooth">IconClass (Bootstrap)</SplitButtonItem>
        <SplitButtonItem SpriteClass="flag-netherlands">SpriteClass</SplitButtonItem>
        <SplitButtonItem ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png">ImageUrl</SplitButtonItem>
        <SplitButtonItem> <TelerikLoader /> Custom markup </SplitButtonItem>
    </SplitButtonItems>
</TelerikSplitButton>

@* Bootstrap Icons stylesheet for the IconClass *@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
      integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous" />

@* CSS styles for the SpriteClass *@
<style>
    .flag-netherlands {
        background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
        background-position: 0 -64px;
    }
</style>

Next Steps

See Also

In this article