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.