Icon ButtonGroup

The ButtonGroup can accommodate an icon and in this way to enhance the meaning of the text content.

You can configure the icons by using the .Icon() method of the ButtonGroup.

    @(Html.Kendo().ButtonGroup()
    .Name("player")
    .Items(t =>
    {
            t.Add().Icon("play");
            t.Add().Icon("pause");
            t.Add().Icon("stop");
    }))

    <kendo-buttongroup name="player">
        <buttongroup-items>
            <item icon="play" text="Play"></item>
            <item icon="pause" text="Pause"></item>
            <item icon="stop" text="Stop"></item>
        </buttongroup-items>
    </kendo-buttongroup>

This ButtonGroup configuration is expected to produce the following HTML output:

<div class="k-button-group k-widget" data-role="buttongroup" id="player" role="group" tabindex="0">
    <span data-icon="play" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-play"></span>
    </span>
    <span data-icon="pause" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-pause"></span>
    </span>
    <span data-icon="stop" aria-pressed="false" role="button" class="k-button k-button-icon">
        <span class="k-icon k-i-stop"></span>
    </span>
</div>

See Also

• Adding Images to the ButtonGroup HtmlHelper for ASP.NET Core (Demo)
• Server-Side API of the ButtonGroup for ASP.NET Core