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

Drawer Icons

Updated on Jan 27, 2026

You can add Telerik Font or SVG icons to the Drawer items. The component also supports custom icons.

To use Drawer item icons, define a property in the component model class and assign the property name to the IconField parameter of the Drawer.

The model property can hold:

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

If the icon property name in the Drawer model is Icon, there is no need to set the IconField parameter.

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

How to use icons in the Telerik Drawer

<TelerikDrawer Data="@Data"
               IconField="@nameof(DrawerItem.Icon)"
               MiniMode="true"
               @bind-Expanded="@DrawerExpanded"
               Mode="DrawerMode.Push"
               @ref="@DrawerRef"
               @bind-SelectedItem="@SelectedItem">
    <DrawerContent>
        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@SvgIcon.Menu">Toggle drawer</TelerikButton>
        <div class="m-5">
            Selected Item: @SelectedItem?.Text
        </div>
    </DrawerContent>
</TelerikDrawer>

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

    /* base styles for all custom icons */
    .my-icon {
        /* Define size, position and font styles here to ensure icons and images will be properly visualized in all themes. */
        width: 1em;
        height: 1em;
        font-size: 16px;
    }

    /* styles for specific custom image */
    .my-image {
        /* define a background image or a font icon glyph here */
        background-image: url('https://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png'); 
        flex-shrink: 0;
    }
</style>

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

<!-- The stylesheets for the custom FontAwesome icon -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />


@code {
    private TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    private bool DrawerExpanded { get; set; } = true;

    private DrawerItem SelectedItem { get; set; }

    private IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>() {
        new DrawerItem { Text = "Home (SVG icon)", Icon = SvgIcon.Home },
        new DrawerItem { Text = "Navigation (Font icon)", Icon = FontIcon.Globe },
        new DrawerItem { Text = "Favorites (Image)", Icon = "my-icon my-image" },
        new DrawerItem { Text = "Settings (Custom icon)", Icon = "my-icon fa fa-cog" },
    };

    public class DrawerItem
    {
        public string Text { get; set; }
        public object Icon { get; set; }
    }
}

Drawer Icons

See Also