Extjs - Add icons to column filter values

I have the following custom grid column :

Ext.define('OrderStatusColumn', {
    extend: 'Ext.grid.column.Column',
    alias: 'widget.OrderStatusColumn',

    text: 'Status',
        
    filter: 'list',
    
    renderer: function(value, metaData) {
        metaData.style = "text-align: left;";                
        var columnInstance = metaData.column;
        var processValue = columnInstance.resolveLookupValue(columnInstance, value, metaData.record);
        var tooltipText = Ext.util.Format.htmlEncode(processValue);
        metaData.tdAttr = 'data-qtip="' + tooltipText + '"';
        var iconHtml = '';
        switch (value) {
            case 'Draft':
                iconHtml = '<i class="fa-regular fa-sticky-note x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>'; 
                break;                   
            default:
                iconHtml = '<i class="fa-regular fa-question-circle x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>';
                break;
        }
        return iconHtml + '<span class="span-overflow-hide" style="display: inline;">' + processValue + '</span>';
    }

});

It displays an icon next to the string value. Is it possible to add the same icon in the filter values?

The grid is using the plugin 'gridfilters'

You can archive this, but you have to put the code in a different place.

Define your Model like this:

   fields: [
        {
            name   : 'OutputStatus',
            depends: [ 'Status' ],
            convert: function(v, record) {
                var iconHtml = '';

                switch (value) {
                    case 'Draft':
                        iconHtml = '<i class="fa-regular fa-sticky-note x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>'; 
                        break;                   
                   default:
                        iconHtml = '<i class="fa-regular fa-question-circle x-font-awesome-family-regular color-main-base" style="font-size: 18px;margin-right:5px;"></i>';
                        break;
               }

               return iconHtml + '<span class="span-overflow-hide" style="display: inline;">' + processValue + '</span>';
            }
        }
   ]

In your grid-colum you use the dataIndex: 'OutputStatus'

Now you have the same icon for the column and for the search list.

Be careful, you can use this for the list, but not for a String search.

If you have more questions, please setup a fiddle.