Changing 'expand row' icon and its location in expandable angular ui-grid - angularjs

Question

I want to change the icon and location of button / icon for expanding any row in angular ui-grid. By default, the icon is plus squared and location is left most column. Any pointers for this would be appreciated.
Instead of:
I want :

Answer 1

I fingered out the solution from Vijay's help.
Updated plunk here
Use cell template to define a custom cell and capture the expandable event of ui-grid
cellTemaplte example:
{
name: 'Actions',
displayName: '',
enableFiltering: false,
enableColumnMenu: false,
cellTemplate: ' <div \
class="ui-grid-cell-contents"> \
<i \
ng-class="{ \'ui-grid-icon-right-dir\' : !row.isExpanded, \'ui-grid-icon-down-dir\' : row.isExpanded }" \
ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"> \
</i> \
</div>',
enableSorting: false
}

Answer 2

You need to set below :
enableExpandableRowHeader: false
Then you need to use a custom cell template for using other icons. I have used a Font awesome icon in the plunker below. Don't forget to inject $templateCache in controller.
app.controller('MainCtrl', ['$scope', '$http', '$log', "$templateCache",function ($scope, $http, $log,$templateCache)
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'},
{
// Add a new column with your icon
name: 'Expandable',
displayName: '',
enableSorting: false,
headerCellClass: 'header-cell',
cellClass: 'center-align',
enableCellEdit: false,
enableFiltering: false,
width: '14%',
cellTemplate: $templateCache.put('ui-grid/expandableRowHeader',
"<div class=\'ui-grid-cell-contents expand-row\'>" +
"<i class=\'icon-margin fa fa-pencil-square-o\' " +
"ng-click=\'grid.api.expandable.toggleRowExpansion(row.entity)\'></i>" +
"</div>"
)
}
Plunker : http://plnkr.co/edit/7M8ZIAhHHjURkb9nSbBn?p=preview