[Solved] What is the correct way to assign icons to RadToolBarButtons and RadToolBarDropDowns (with or without text) using the WebComponentsIcons font?

[H. Baris]

In the CMS I developed, I'm providing administrators with an admin bar in an ASCX file using RadToolBar when viewing content pages. I want to assign icons to RadToolBarButtons and RadToolBarDropDowns, just like the icons on other toolbars in the admin panel, using the icons from the document at https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/. Since other toolbars have text on their buttons, I can simply assign icons using `.rtbText::before`. However, this method doesn't work for the content page toolbar buttons because they don't have text. All the methods I've tried to assign icons to both text-based and textless buttons have led to different problems. The methods in the Telerik documentation are generally written for RadButtons and similar controls. I can find it somewhere

<telerik:RadToolBar ID="RadToolBar1" runat="server">
<Items>
<telerik:RadToolBarButton Text="Settings" SpriteCssClass="fas fa-cog custom-icon" />
</Items>
</telerik:RadToolBar>

CSS:

.RadToolBar .rtbItem .rtbIcon:before {
font-family: 'WebComponentsIcons'; 
font-weight: 900;
}

.custom-icon:before {
content: "\f013"; 
}

This method didn't show any icons either. The classes given within SpriteCssClass are not reflected in the HTML output at all.

The toolbar is already LightWeight.

What's the correct way to do this? The only solution I've found so far that doesn't break anything else is to write the icons directly into the text as Unicode characters, but for system-wide standardization, I would prefer a solution that uses the WebComponentsIcons fonts.

[Vasko]

Hi,

The SpriteCssClass property in RadToolBar is intended for sprite images, not for icon fonts. It only works if EnableImageSprite is set to true, and it applies CSS classes for background images, not font icons. Custom classes like fas fa-cog or your icon font classes are not rendered as class attributes in the HTML output for RadToolBar items. This is why the CSS selectors targeting .custom-icon:before or .rtbIcon:before do not apply. Unlike RadButton or RadPushButton, RadToolBar does not natively support icon font classes for its buttons.

The best approach that works for both text and textless buttons and uses WebComponentsIcons is to use CssClass on the button and target .rtbWrap::before in your CSS. The .rtbWrap span is always rendered regardless of whether there is text or an image.

<telerik:RadToolBar ID="RadToolBar1" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:RadToolBarButton Text="Settings" CssClass="rtb-icon-settings" />
        <telerik:RadToolBarDropDown CssClass="rtb-icon-user">
            <Buttons>
                <telerik:RadToolBarButton Text="Profile" />
                <telerik:RadToolBarButton Text="Logout" />
            </Buttons>
        </telerik:RadToolBarDropDown>
    </Items>
</telerik:RadToolBar>

html body .RadToolBar [class*="rtb-icon-"] {
    display: inline-flex; /* override Telerik's inline-block */
    align-items: center;
    justify-content: center;
}

html body .RadToolBar [class*="rtb-icon-"]::before {
    font-family: 'WebComponentsIcons';
    font-size: 16px; /* tune to match your toolbar height */
    line-height: 1;
    padding-right: 16px;
}

.RadToolBar .rtb-icon-settings::before {
    content: "\e401";
}

.RadToolBar .rtb-icon-user::before {
    content: "\e502";
}

Regards,
Vasko
Progress Telerik