Ticket T902046
Visible to All Users

Using Font Awesome instead of Open Iconic

created 5 years ago

We've been using the paid version of Font Awesome for quite a while now and we would really like to use it with DevExpress Blazor. Unfortunately some components, like the Data Grid, don't seem to provide an easy way to customize all icons it uses.

One example I'm currently stuck at is the sorting icon in the Data Grid header. The icon does not seem customizable at all.

First of all, Font Awesome provides two ways to install it. The first way is via CSS and a webfont. This could theoretically provide an ugly way to add a Font Awesome icon to an open iconic icon. Here's a BlazorStyled (CSS) approach that I haven't tested yet:

Code
<Rule Selector=".oi-arrow-bottom:before" content="\f2da" font_family="FontAwesome" />

A different, maybe even readable solution would be using the JS version of Font Awesome, which simply scans the site for an i tag with specific classes. My approach would be to scan the site for span elements with classes like oi oi-arrow-bottom and simply replacing them with Font Awesome graphics. Hacky but usable. Not optimal. Similar to this solution.

One of the best solutions is probably to allow us to customize all icons in DevExpress Blazor. This already works with some components, but unfortunately not with the table sorting icon. I'm guessing that there are other cases where customizing the icon is not possible, either.

Some libraries provide entire entire icon dictionaries where the user can provide icon components that are rendered instead of the default icon provided by the library. This would basically allow the user to effectively translate all icons to their desired library's components.

Answers approved by DevExpress Support

created 5 years ago

Hello,

DxDataGrid does not allow you to modify its column icons. We will discuss the possibility of implementing this feature in future releases. For now, I can only suggest you use Paul's workaround from the following ticket: DataGrid for Blazor - How to show an icon in a column header.

Thanks,
Stanley

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.