# IconStyle

Canonical page: https://www.adaptabletools.com/docs/reference/iconstyle

Renders cell values as icons by looking up the cell value in a list of key → icon mappings; designed for one-glyph-per-cell visual recognition

```ts title="TypeScript"
export interface IconStyle 
```

## Properties

| Property | Type | Description | Default |
| --- | --- | --- | --- |
| [Cell](https://www.adaptabletools.com/docs/reference/iconstyle.md#cell) | [`CellBoxStyle`](https://www.adaptabletools.com/docs/reference/cellboxstyle.md) | Optional stying (background / border / radius) for Cell behind the Icon |   |
| [CellTextProperties](https://www.adaptabletools.com/docs/reference/iconstyle.md#celltextproperties) | `IconCellTextProperties` | Companion text to render alongside a matched icon (Cell Value and/or<br/>the matched mapping&#39;s Description) and where it sits relative to the<br/>icon (Before / After / Above / Below).<br/><br/>Mirrors the `CellTextProperties` grouping used by `PercentBarStyle`,<br/>`BulletChartStyle` and `RangeBarStyle` for consistency. |   |
| [FallbackProperties](https://www.adaptabletools.com/docs/reference/iconstyle.md#fallbackproperties) | `IconFallbackProperties` | Behaviour when no mapping matches the cell value, plus the icon used<br/>by `Mode: 'Icon'`.<br/><br/>Defaults to `{ Mode: 'Hide' }` when omitted. |   |
| [Font](https://www.adaptabletools.com/docs/reference/iconstyle.md#font) | [`CellFontStyle`](https://www.adaptabletools.com/docs/reference/cellfontstyle.md) | Optional cell-text styling applied to the companion text |   |
| [Gap](https://www.adaptabletools.com/docs/reference/iconstyle.md#gap) | `number` | Pixel gap between the icon and the cell text (when shown). | `4` |
| [Mappings](https://www.adaptabletools.com/docs/reference/iconstyle.md#mappings) | [`IconStyleMapping`](https://www.adaptabletools.com/docs/reference/iconstylemapping.md)`[]` | Custom mappings for style (layered on top of a preset); leave undefined to use preset as-is |   |
| [MatchMode](https://www.adaptabletools.com/docs/reference/iconstyle.md#matchmode) | [`IconStyleMatchMode`](https://www.adaptabletools.com/docs/reference/iconstylematchmode.md) | How `Key` is compared with the cell value (Exact or Case Insensitive) | `'Exact'` |
| [Preset](https://www.adaptabletools.com/docs/reference/iconstyle.md#preset) | [`IconStyleBuiltInPreset`](https://www.adaptabletools.com/docs/reference/iconstylebuiltinpreset.md) | Built-in mappings to use for the Icon Style |   |
| [Size](https://www.adaptabletools.com/docs/reference/iconstyle.md#size) | `number` | Pixel size of icon glyph (square) | `18` |
| [ToolTipText](https://www.adaptabletools.com/docs/reference/iconstyle.md#tooltiptext) | `('CellValue' \| 'IconDescription')[]` | Tooltip content: `CellValue` (raw cell value) or `IconDescription` (matched mapping&#39;s `Description`) |   |

## Property Details

### Cell

Optional stying (background / border / radius) for Cell behind the Icon

```ts title="TypeScript"
Cell?: CellBoxStyle;
```

###### Property Value

[`CellBoxStyle`](https://www.adaptabletools.com/docs/reference/cellboxstyle.md)

### CellTextProperties

Companion text to render alongside a matched icon (Cell Value and/or
the matched mapping&#39;s Description) and where it sits relative to the
icon (Before / After / Above / Below).

Mirrors the `CellTextProperties` grouping used by `PercentBarStyle`,
`BulletChartStyle` and `RangeBarStyle` for consistency.

```ts title="TypeScript"
CellTextProperties?: IconCellTextProperties;
```

###### Property Value

`IconCellTextProperties`

### FallbackProperties

Behaviour when no mapping matches the cell value, plus the icon used
by `Mode: 'Icon'`.

Defaults to `{ Mode: 'Hide' }` when omitted.

```ts title="TypeScript"
FallbackProperties?: IconFallbackProperties;
```

###### Property Value

`IconFallbackProperties`

### Font

Optional cell-text styling applied to the companion text

```ts title="TypeScript"
Font?: CellFontStyle;
```

###### Property Value

[`CellFontStyle`](https://www.adaptabletools.com/docs/reference/cellfontstyle.md)

### Gap

Pixel gap between the icon and the cell text (when shown).

```ts title="TypeScript"
Gap?: number;
```

###### Default Value

`4`

###### Property Value

`number`

### Mappings

Custom mappings for style (layered on top of a preset); leave undefined to use preset as-is

```ts title="TypeScript"
Mappings?: IconStyleMapping[];
```

###### Property Value

[`IconStyleMapping`](https://www.adaptabletools.com/docs/reference/iconstylemapping.md)`[]`

### MatchMode

How `Key` is compared with the cell value (Exact or Case Insensitive)

```ts title="TypeScript"
MatchMode?: IconStyleMatchMode;
```

###### Default Value

`'Exact'`

###### Property Value

[`IconStyleMatchMode`](https://www.adaptabletools.com/docs/reference/iconstylematchmode.md)

### Preset

Built-in mappings to use for the Icon Style

```ts title="TypeScript"
Preset?: IconStyleBuiltInPreset;
```

###### Property Value

[`IconStyleBuiltInPreset`](https://www.adaptabletools.com/docs/reference/iconstylebuiltinpreset.md)

### Size

Pixel size of icon glyph (square)

```ts title="TypeScript"
Size?: number;
```

###### Default Value

`18`

###### Property Value

`number`

### ToolTipText

Tooltip content: `CellValue` (raw cell value) or `IconDescription` (matched mapping&#39;s `Description`)

```ts title="TypeScript"
ToolTipText?: ('CellValue' | 'IconDescription')[];
```

###### Property Value

`('CellValue' | 'IconDescription')[]`