Pin icon for Angular UI-Grid - angular-ui-grid

Question

I'm looking to show a little pin image next to the column name on columns that are pinned just so it's more obvious.
I'm already using a custom header as I show a menu icon for each column that gives functionality per column, but not sure how to tell if the column is pinned and then display an image when pinned.
Here is my current custom header:
var newValuesColumnHeaderTemplate = '<div role="columnheader"' +
' ng-class="{ \'sortable\': sortable }"' +
' ui-grid-one-bind-aria-labelledby-grid="col.uid + \'-header-text \' + col.uid + \'-sortdir-text\'"' +
' aria-sort="{{col.sort.direction == asc ? \'ascending\' : ( col.sort.direction == desc ? \'descending\' : (!col.sort.direction ? \'none\' : \'other\'))}}">' +
' <div class="list-icon">' +
' <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' +
' </div>' +
'' +
' <div role="button"' +
' tabindex="-1"' +
' style="padding-left:15%"' +
' class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"' +
' col-index="renderIndex"' +
' title="TOOLTIP">' +
' <span class="ui-grid-header-cell-label"' +
' ui-grid-one-bind-id-grid="col.uid + \'-header-text\'">' +
' {{ col.displayName CUSTOM_FILTERS }}' +
' </span>' +
' <span ui-grid-one-bind-id-grid="col.uid + \'-sortdir-text\'"' +
' ui-grid-visible="col.sort.direction"' +
' aria-label="{{getSortDirectionAriaLabel()}}">' +
' <i ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }"' +
' title="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' +
' aria-hidden="true">' +
' </i>' +
' <sub class="ui-grid-sort-priority-number">' +
' {{}}' +
' </sub>' +
' </span>' +
' </div>' +
' <div role="button"' +
' tabindex="-1"' +
' ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"' +
' class="ui-grid-column-menu-button"' +
' ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"' +
' ng-click="toggleMenu($event)"' +
' ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"' +
' ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"' +
' aria-haspopup="true">' +
' <i class="ui-grid-icon-angle-down"' +
' aria-hidden="true">' +
'  ' +
' </i>' +
' </div>' +
' <div ui-grid-filter></div>' +
'</div>';

Answer 1

One way around this may be to target the pinned columns via CSS, e.g. (assuming FontAwesome has been referenced for images):
.ui-grid-pinned-container .ui-grid-header-cell {
position: relative;
}
.ui-grid-pinned-container .ui-grid-header-cell:after {
position: absolute;
font-family: 'FontAwesome';
content: '\f08d'; // fa-thumb-tack
font-size: .75em;
right: 2em;
top: 0.5em;
width: 1em;
height: 1em;
}
See: http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview