How to render a font awesome icon when comparing from a value - Ext JS

Question

I have a Grid, and on the grid line I want to render an awesome font icon depending on a condition.

text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
    if(value === 1){
        return 'x-fa fa-arrow-circle-up';
    }else if(value === 3){
        return 'x-fa fa-arrow-circle-down';
        }
    }

                                                     .                                                  

Answer 1

I found a way to solve

text: UITEXT.GENERAL_STATUS,
dataIndex: 'status',
sortable: false,
flex: 0.5,
align: 'center',
renderer: function (value, record, dataIndex, cell, column) {
    cell.setTools({
        name: {
            iconCls: value === 1 ? 'x-fa fa-arrow-circle-up' : 'x-fa fa-arrow-circle-down',
        }
    });
},

Answer 2

According to the documentation, you need to return from the renderer function:

The HTML string to be rendered.

Since FontAwesome icons are referred in Ext JS with CSS styles, you can do the following:

return '<span class="x-fa fa-arrow-circle-up"></span>';

If you need some custom styling you can add it as well:

return '<span style="width:24px;color:red;" class="x-fa fa-arrow-circle-up"></span>';