Ability to change the built-in icons

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 13 Nov 2024 12:03 by ADMIN

Nathan

Created on: 16 Feb 2024 11:04

Category: UI for Blazor

Type: Feature Request

Ability to change the built-in icons

I'd like to be able to change the built-in icons that the components use. I currently can do that with custom solutions but I need an option to easily change all icons on a global app level (e.g. all save icons, all arrow-down icons, etc.). I have a custom icon set and I want to ensure consistency in the icons used throughout the app.

3 comments

ADMIN

Dimo

Posted on: 13 Nov 2024 12:03

Hello everyone,

While this feature request awaits prioritization, I can suggest an alternative approach to use custom font icons with Telerik UI for Blazor.

The steps below use a DatePicker and FontAwesome as an example.

Use ThemeBuilder Pro or a higher tier.
Select the desired icon's <span> element, click on "Select local text properties" and go to Manage Fonts (see the attached screenshot 01_and_03).
Upload the custom font in the ThemeBuilder (screenshot 02). Set the Font Name to match the required font-family name in the CSS code.
Set the correct font-family style (screenshot 01_and_03).
Set the correct glyph (screenshot 04). The exact value depends on the third-party icon library.
Export the custom theme and use it in your app instead of a built-in theme.
Register a CSS file that loads the desired icon font.
Set the icon type to Font in the TelerikRootComponent.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Attached Files:

Nathan

Posted on: 27 Mar 2024 10:54

Hi Martijn,

The post was created by Telerik from our support ticket so maybe isn't as clear as it could be. When it mentions custom solutions it just means our own custom Blazor components such as search components rather than Telerik's. One example of a Telerik component where we were struggling to customise the icon is the the DropDownList component where we want a different search icon.

Where some components allow you to easily replace the icons with your own, other components do not, hence the idea for a much more consistent approach of globally replacing icons, so they all match the desired icon style.

Though not ideal, Telerik did offer an way to change the search icon in the DropDownList, here is what they said:

Use a HeaderTemplate.
In the Template add a TextBox component.
Add the desired icon as a prefix (this will be supported in our upcoming release - see Support for input prefix and suffix icons. Currently, it is possible to add icon in the TextBox like so: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-add-icon.
Handle the ValueChanged or OnChange event of the TextBox to implement custom filtering. For the custom filtering, you need to:
- Get the TextBox value.
- Find the matching results in your DropDownList data source and add them to a new collection.
- Pass that new collection to the Data parameter of the DropDownList.
- Rebind the DropDownList and refresh its popup.

Our own components use the TelerikSvgIcon component when we need to display an icon. We have created our own custom collection of icons instead of using Telerik's, for example we have a TooltipHelp.cs icon which is referenced in an NMD3Icons.cs file (which lists all our icons) we then fetch the icons the following way:

<TelerikSvgIcon Icon="NMD3Icons.TooltipHelp" />

I hope that helps in some way, hopefully Telerik will add the ability to globally change the icons that can't currently be changed in the near future.

Thanks

Nathan

Martijn

Posted on: 26 Mar 2024 10:07

Our devs are also looking for a solution to change the icons globally to the MS Fluent 2 iconset. Can you show us your custom solution Nathan?