Where is the WebComponentsIcons referente list?

[Hugo Augusto]

Checking the current demos I noticed you are still using the WebComponentsIcons font for the icons like in RadDock. Where can I find a list of the Icons inside that font along with the codes used for each icon? KendoUI icon fonts listed here (List of Icons in the Telerik and Kendo UI Web Components Icons System | Design System Kit) don't match.

 

Thank you

[Hugo Augusto]

Never mind, someone already did what Telerik could have done in 15 minutes and make available for everyone in documentation or in your existing site with the list of icons. It's not that hard.

https://sodeve.net/2021/09/webcomponentsicons-full-icons-list/comment-page-1/

[Rumen]

Hi Hugo,

I’m happy to share that I've included a dedicated section in our documentation that lists the icons in the WebComponentsIcons font along with their Unicode values. You can check it out here:

• List of WebComponentsIcons Icons
• How to Use WebComponentsIcons

These resources include a comprehensive reference of the icons and practical guidance on how to use them. If you have any suggestions or spot something that could make it even better, we’d love to hear your feedback!

 

Regards,
Rumen
Progress Telerik

[Hugo Augusto]

That is a good ending to this matter and very beneficial to all your customers. You should upgrade my telerik points 😉 

Regards

[Rumen]

I'm glad the resource was helpful! 😊 You've made a great contribution to the community, so I'll gladly add some Telerik points to your account.

[Rumen]

Hi Hugo,

The WebComponentsIcons font used in Telerik UI for ASP.NET AJAX does not have a direct public documentation listing all the icons and their corresponding Unicode values. However, you can try the following methods to access and use the icons:

• Inspect the Font File and Preview the Icons: Use a font viewer tool to open the .woff font file and see the glyphs and their Unicode values. For example, try an online font viewer tool, such as Font Drop, to preview the available icons in the font file. Just drag and drop the WOFF file into the Font Drop tool to see a visual representation of each icon, including its Unicode value.

• Use Developer Tools: Utilize browser developer tools to inspect elements that use the WebComponentsIcons font. This can help you identify the specific Unicode values for the icons used in your application. Here's a brief guide on how to do it:

  • Open your web application in a browser.

  • Right-click on an icon and select "Inspect" to open the Developer Tools.

  • Look for the CSS styles applied to the icon, especially the content property, which shows the Unicode value.

• Custom CSS Classes: Once you identify the Unicode values, you can create custom CSS classes for specific icons. Here's an example:

  .my-custom-icon:before {
      content: "\e001"; /* Replace with the actual Unicode value */
      font-family: 'WebComponentsIcons';
  }
  

 

Regards,
Rumen
Progress Telerik