Replacing text with icons

Using datatable on SharePoint Online, is there a way to replace the text with icons based on values?
Example: Value = In, display <img src='/_layouts/images/KPIDefault-2.GIF'/>

I was using client side rendering but can't figure out how to do this in datatable.

(function() {
    var oFldCtx = {};
    oFldCtx.Templates = {};
    oFldCtx.Templates.Fields = {"InOut": {"View": overrideStatus} };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

function overrideStatus(ctx) {
    var oStatus = ctx.CurrentItem.InOut;

    if (oStatus == 'In')    {
        return "<img src='/_layouts/images/KPIDefault-0.GIF'/>";
    }
    if (oStatus == 'Out-A')     {
        return "<img src='/_layouts/images/KPIDefault-2.GIF'/>";
    }
    if (oStatus == 'Out-P')     {
        return "<img src='/_layouts/images/KPIDefault-1.GIF'/>";
    }

}