Required help in applying color on the icons

[DataOrg]

Hi ALl,

I need help in applying color on icons of status, when i use only icons its works with color on the Javascript but if i added the text value with color its not working. @kamlesh_vaghela  could you pls help

I want to display results with text and icon together in a same column

Output:

Information (ICON)

Error(ICON)

Javascript:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], 

function(_, $, mvc, TableView)
{
    //Translations from rangemap results to CSS class
    var ICONS = {
        Critical: 'check-circle',
        Error: 'alert',
        Warning: 'check-circle',
	Debug: 'check-circle',
	Information: 'check-circle',
	Trace: 'check-circle',
	None: 'check-circle',
	
    };

    var CustomIconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            //Only use the cell renderer for the range field
            return _(['Event Level']).contains(cell.field);
        },
        render: function($td, cell) {
            var icon = 'question';
            //Fetch the icon for the value
            if (ICONS.hasOwnProperty(cell.value)) {
                icon = ICONS[cell.value];
            }
            //Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<%- text %> <i class="icon-<%-icon%>"></i>', {
                icon: icon,
                text: cell.value
				
            }));
        }
    });
   mvc.Components.get('tbl1').getVisualization(function(tableView)
	{
        //Register custom cell renderer, the table will re-render automatically
        tableView.addCellRenderer(new CustomIconRenderer());
    });
});

CSS:

/* Custom Icons */
          td.icon {
              text-align: center;
          }
          td.icon i {
              font-size: 25px;
              text-shadow: 1px 1px #aaa;
          }
          td.icon .Critical {
              color: #F70000;
          }
          td.icon .Error {
              color: #EEFA33;
          }
          td.icon .Warning {
              color: #006400;
          }
          td.icon .Debug {
              color: #006400;
          }
          td.icon .Information {
              color: #006400;
          }
           td.icon .Trace {
              color: #006400;
          }
           td.icon .None {
              color: #006400;
          }

[kamlesh_vaghela · Accepted solution]

Hello @DataOrg 

You missed to add text in style also. Can you please update your code with below one?

//Create the icon element and add it to the table cell
            $td.addClass('icon').html(_.template('<%- text %> <i class="icon-<%-icon%> <%- text %>"></i>', {
                icon: icon,
                text: cell.value
            }));

Thanks
Kamlesh Vaghela

[DataOrg]

@kamlesh_vaghela  thanks, it worked