Display "icon font" in actioncolumn

[lefedad]

I started migrating my Valence 3.2 apps to Valence 4.1. The first app I am working on has an action column, here is the code.

Ext.define('ResaleDeliveryLog.view.DeliveryLogGrid', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.deliveryloggrid',
	itemId: 'DeliveryLogGrid',
	store: 'Receipts',
	emptyText: 'No Deliveries To Display',
	initComponent: function () {
		var me = this;

		Ext.applyIf(me, {
			dockedItems: [{
				xtype: 'toolbar',
				dock: 'top',
				items: [{
					xtype: 'tbspacer'
				}, {
					xtype: 'button',
					text: 'Close',
					itemId: 'closeButton',
                    iconCls: 'vvicon-16 vvicon-exit-3',
                    tooltip: 'click this button after selecting PO to close'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'tbseparator'
				}, {
					xtype: 'tbfill'
				}, {
					xtype: 'tbseparator'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'triggerfield',
					itemId: 'search',
					triggerCls : 'x-form-clear-trigger',
					// enable key events so listener will catch keyup and enter
					enableKeyEvents : true,
					// trigger clicked - blank out search box and fire event clearit (reloads gird)
					onTriggerClick : function(){
						this.setValue('');
						this.fireEvent('reset');
					},
					fieldLabel: 'Quick Search'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'tbseparator'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'button',
					itemId: 'btnFilters1',
					text: 'Advanced Search',
                    iconCls: 'vvicon-16 vvicon-search-5',
                    tooltip: 'click this button to view the Advanced Search window'
				}, {
					xtype: 'button',
					itemId: 'btnFilters2',
					text: 'Advanced Search',
                    iconCls: 'vvicon-16 vvicon-search-5',
                    tooltip: 'click this button to view the Advanced Search window',
					border: 1,
					 style: {
					 	borderColor: 'red',
					 	borderStyle: 'solid'
					},
					hidden: true
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'tbseparator'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'button',
					itemId: 'resetButton',
                    iconCls: 'vvicon-16 vvicon-download-7',
                    tooltip: 'click this button to reset main grid',
					text: 'Reset'
				}, {
					xtype: 'tbspacer'
				}, {
					xtype: 'tbseparator'
				}],
			}, {
				xtype: 'pagingtoolbar',
				dock: 'bottom',
				itemId: 'pagingtoolbar',
				width: 360,
				displayInfo: true,
				store: 'Receipts'
			}],
			columns: [{
				xtype: 'gridcolumn',
				dataIndex: 'D2HDRDATA',
				text: '<b>Delivery<br />Date</b>',
				width: 100,
				align: 'center'
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2SUPLRNBR',
				text: '<b>Vendor</b>',
				width: 250
				// align: 'center',
				/* renderer: function(value, metaData, record, rowIndex, colIndex) {
				 if (value !== '') {
				 metaData.tdCls = 'custom-column-bold';
				 return value;
				 }
				 return value;
				 } */
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2PONBR',
				text: '<b>PO #</b>',
				width: 70,
				align: 'center'
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2STATUS',
				text: '<b>Status</b>',
				width: 80,
				align: 'center'
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2EXPDLVDT',
				text: '<b>Expected Delivery<br />Date</b>',
				width: 125,
				align: 'center',
				renderer: function (value, metaData, record, rowIndex, colIndex) {
					var daysDiff = record.get('D2DAYSDIFF');
					if (daysDiff !== '') {
						var n = daysDiff.search("-");
						if (n >= 1) {
							metaData.tdCls = 'custom-column-red';
						}
						return value;
					}
					return value;
				}
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2DAYSDIFF',
				text: '<b>Days<br />Difference</b>',
				width: 80,
				align: 'center',
				renderer: function (value, metaData, record, rowIndex, colIndex) {
					var daysDiff = record.get('D2DAYSDIFF');
					if (daysDiff !== '') {
						var n = daysDiff.search("-");
						if (n >= 1) {
							metaData.tdCls = 'custom-column-red';
						}
						return value;
					}
					return value;
				},
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2FOB',
				text: '<b>F.O.B.</b>',
				width: 70,
				align: 'center',
				/*renderer: function (value, metaData, record, rowIndex, colIndex) {
					if (record.get('D2FOB') === 'Pick-Up') {
						metaData.tdCls = 'custom-column-blue1';
						return value;
					}
					if (record.get('D2FOB') === 'Delivery') {
						metaData.tdCls = 'custom-column-green';
						return value;
					}
					if (record.get('D2FOB') === 'Direct') {
						metaData.tdCls = 'custom-column-magenta';
						return value;
					}
					return value;
				}, */
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2DLVYLOC',
				text: '<b>Delivery<br />Location</b>',
				width: 200,
				align: 'center',
				/* renderer: function (value, metaData, record, rowIndex, colIndex) {
					if (record.get('D2FOB') === 'Pick-Up') {
						metaData.tdCls = 'custom-column-blue1';
						return value;
					}
					if (record.get('D2FOB') === 'Delivery') {
						metaData.tdCls = 'custom-column-green';
						return value;
					}
					if (record.get('D2FOB') === 'Direct') {
						metaData.tdCls = 'custom-column-magenta';
						return value;
					}
					return value;
				}, */
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2TRCKCOMP',
				text: '<b>Trucking<br />Company</b>',
				width: 150,
				align: 'center',
				/* renderer: function (value, metaData, record, rowIndex, colIndex) {
					if (record.get('D2FOB') === 'Pick-Up') {
						metaData.tdCls = 'custom-column-blue1';
						return value;
					}
					if (record.get('D2FOB') === 'Delivery') {
						metaData.tdCls = 'custom-column-green';
						return value;
					}
					if (record.get('D2FOB') === 'Direct') {
						metaData.tdCls = 'custom-column-magenta';
						return value;
					}
					return value;
				}, */
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2SEALCODE',
				text: '<b>Seal<br />Number</b>',
				width: 80,
				align: 'center',
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2CURQTY',
				text: '<b>Order Qty<br />Remaining</b>',
				width: 100,
				align: 'center',
				renderer: function (value, metaData, record, rowIndex, colIndex) {
					var qtyDiff = record.get('D2QTYDIFF');
					if (qtyDiff.trim() !== '0') {
						metaData.tdCls = 'custom-column-red';
					}
					return value;
				},
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2DLVYQTY',
				text: '<b>Delivered<br />Quantity</b>',
				width: 100,
				align: 'center',
				renderer: function (value, metaData, record, rowIndex, colIndex) {
					var qtyDiff = record.get('D2QTYDIFF');
					if (qtyDiff.trim() !== '0') {
						metaData.tdCls = 'custom-column-red';
					}
					return value;
				},
				menuDisabled: true
			}, {
				xtype: 'gridcolumn',
				dataIndex: 'D2QTYDIFF',
				text: '<b>Quantity<br />Difference</b>',
				width: 100,
				align: 'center',
				renderer: function (value, metaData, record, rowIndex, colIndex) {
					var qtyDiff = record.get('D2QTYDIFF');
					if (qtyDiff.trim() !== '0') {
						metaData.tdCls = 'custom-column-red';
					}
					return value;
				},
				menuDisabled: true
			}, {
				xtype: 'actioncolumn',
				itemId: 'actionColViewDtls',
				text: '<b>View<br>Details</b>',
				align: 'center',
				width: 80,
				items: [{
					iconCls: 'vvicon-16 vvicon-exit-3',
					itemId: 'viewItems',
					tooltip: 'View Items',
					align: 'center',
					handler: function(grid, rowIndex, colIndex) {
						this.up('deliveryloggrid').fireEvent('viewitemdetailsclick', grid, rowIndex, colIndex);
					}
				}],
				menuDisabled: true
			}]
		});
		me.callParent(arguments);
	}

});

As you can see I used the "vvicon" on my buttons but I don't know how to code it on the action column... it won't display.

Can you point me to some documentation that defines how and where to use the icon fonts?

Thank you.