Add CoreUI icon to DevExtreme dxDataGrid column header in Vue.js

Question

Currently I am working on a new UI for a legacy API. Unfortunately, this one delivers HTML source code for a column header. This code usually creates a FontAwesome icon. This library will not be used in the new project.

I found a very similar icon in the Icon Library of CoreUI. Now it is only a matter of rendering the icon at this point. However, no approach has been successful so far. How can I replace the icon in the headerCellTemplate method?

Or maybe there is a completely different, much better approach to do this. I don't know if I am on the right track with this method approach. You can probably use static templates, but I don't know how to do that.

import { CIcon } from '@coreui/vue';
import { cilCheckCircle } from '@coreui/icons';

headerCellTemplate: (element, info) => {
    element.innerHTML = curr.ColumnTitle;
    if (element.firstChild.nodeName === 'I') {
        // WORKS
        //element.firstChild.innerHTML = 'Done';

        // ANOTHER EXPERIMENT
        //const componentClass = Vue.extend(cilCheckCircle);
        //const instance = new componentClass();
        //instance.$mount();
        //element.removeChild(element.firstChild);
        //element.appendChild(instance.$el);

        // ALSO NOT WORKING
        return CIcon.render.call(this, cilCheckCircle);
    }
}

Answer 1

I finally found a solution after revisiting this interesting article.

import Vue from 'vue';
import { CIcon } from '@coreui/vue';
import { cilCheckCircle } from '@coreui/icons';

headerCellTemplate: (element, info) => {
    element.innerHTML = curr.ColumnTitle;

    if (element.firstChild.nodeName === 'I') {
        const cIconClass = Vue.extend(CIcon);
        const instance = new cIconClass({
            propsData: { content: cilCheckCircle }
        });
        instance.$mount(element.firstChild);
    }
}

I don't know, though, if this is the ideal solution. So feel free to tell me, if you have a better, less complex solution.