DataGrid for Blazor - How to show an icon in a column header

Hello Niki,

Thank you for your clarification. At this moment, the only workaround is to change a column's caption on the client side via JavaScript interop.

You need to set a CSS Class marker by setting the CssClass property, e.g. with the my-grid value. Inject IJSRuntime on a page:

Razor
@inject IJSRuntime JSRuntime

In the OnAfterRenderAsync method, call a JS function that would change a column's caption:

C#
protected override async Task OnAfterRenderAsync(bool firstRender) {
    await JSRuntime.InvokeAsync<string>("changeCaption", "TemperatureF");
}

You can implement the changeCaption function in the following manner:

JavaScript
function changeCaption(caption) {
    var myGrid = document.querySelector(".my-grid");
    var headers = myGrid.querySelectorAll(".dxbs-fixed-header-content");
    for (var i = 0; i < headers.length; i++) {
        var header = headers[i];
        if (header.innerText == caption) {
            var link = header.querySelector("a");
            link.innerHTML = "<i class='fa fa-car'></i>";
            break;
        }
    }
}

Please note that this is only a temporary workaround so make sure that you test it thoroughly after update to future versions before a build-in solution is not provided.
I've attached a sample project so you can test how it works. Let me know if you have additional questions.