Sharepoint - JSLink - Client side rendering -How to render custom display name with ICON in the list view?

This worked for an announcements list. You need to write your code in 'OnPostRender'. Check the rendered DOM and modify the code in 'postRenderHandler' function if needed. Add the required html for displaying your icon. You might want to add some validations to make sure the code doesn't throw any errors.

(function () { 


    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

    var ctx = {}; 
    ctx.OnPostRender = postRenderHandler;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx); 


})(); 

function postRenderHandler(ctx) {
    var titleFieldDisplayName = ctx.ListSchema.Field[0].DisplayName;
    console.log(titleFieldDisplayName);
    $("div[displayname='" + titleFieldDisplayName + "']").prepend("<b>html before </b>");
    $("div[displayname='" + titleFieldDisplayName + "']").append("<b> html after </b>");

}

A no JQuery solution for adding images to a ListView header

There are lots of images available;
Use https://github.com/purtuga/SPImages/ to browse the default _layouts/images folders

var displayname='Due Date';
var el=document.querySelector("DIV[displayname='" + displayname + "'] A");
el.innerHTML = "<img src='/_layouts/images/ADDTOFAVORITES.GIF' />" + "myLabel";

if you want to target by columnNr you can do

var columnNr=3;
var el=document.querySelectorAll("DIV[ctxnum] A")[ columnNr ];
el.innerHTML = "<img src='/_layouts/images/ADDTOFAVORITES.GIF' />" + "myLabel";

Notes:

• the Selector selects the A tag and not just the outer DIV, so the IMG gets the same click behaviour as the columnheader

• if you want to keep the existing label use:

    el.innerHTML = "<img src='YOURIMAGEURL' />" + el.innerHTML;
  

• with multiple Views on one page you can narrow this down with the ctx ID:

    var el=document.querySelectorAll("DIV[ctxnum='26'] A")[ columnNr ];
  

iCSR-headers