Tablesorter Filter drop-down with icons

Question

I have created a table using tablesorter plugin. I want icon to be appeared in filter dropdown.

Would it be possible?

HTML

<script id="log_info" type="text/x-jsrender">
    <table class="tablesorter" style="border-collapse: collapse" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="filter-select" data-placeholder="Select a severity">Severity</th>
                <th data-placeholder="Choose timestamp">Timestamp</th>
                <th data-placeholder="Choose a command">Command</th>
                <th class="filter-false">Output</th>
            </tr>
        </thead>
        <tbody>
            {{for data}}
            <tr>
                <td><img class="icon" src="/media/img/block.png" alt="{{>type}}" /> {{:#data[0]}} In</td>
                <td>{{:#data[1]}}</td>
                <td>{{:#data[2]}}</td>
                <td>{{:#data[3]}}</td>
            </tr>
            {{/for}}
        </tbody>
    </table>
</script>

Js

var $table = $('table');

$table.tablesorter({
    theme: 'blue',        
    widthFixed: true,        
    widgets: ["zebra", "filter"],      
    widgetOptions: {            
        filter_cssFilter: 'tablesorter-filter',
        filter_childRows: false,            
        filter_hideFilters: false,           
        filter_ignoreCase: true,           
        filter_reset: '.reset',            
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_hideFilters: false,
        filter_functions: {                
            0: false
        }
    }
});

Answer 1

Normal select dropdowns do no allow HTML; this is what is created for when a "filter-select" class is added to the header.

You can use select2's templating to add icons to a custom dropdown and the tablesorter filter_formatter option with the select2 filter formatter code (demo) to create the dropdown you desire.