# IconColumn

Show ICON using Web Font.
Number of ICONs can be set at field.

TIP

When showing ICON to ordinal column, please refer to here

<div class="sample1 demo-grid small"></div>
1

ICON in sample uses Material icons (opens new window)

<!-- Material Icons:  https://material.io/icons/ -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1
2
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.sample1'),
  header: [
    {
      field: 'value',
      caption: 'value',
      width: 100,
    },
    {
      field: 'value',
      caption: 'icon',
      width: 130,
      columnType: new cheetahGrid.columns.type.IconColumn({
        className: 'material-icons',
        content: '\uE885', // https://material.io/icons/#ic_grade
      }),
      style: {
        color: 'gold'
      }
    },
  ],
});
grid.records = [
  {value: 1},
  {value: 2},
  {value: 3},
  {value: 4},
  {value: 5},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29