Icons

We use Material Icons across our interfaces. It is a general-purpose icon set that can be used in a variety of scenarios.

Usage

The <Icon> component is a wrapper around the Material Icons font. It accepts the name of the icon as the content. You can find the name of the icon in the Material Icons documentation. Names should be lowercase, and with spaces replaced with underscores.

For example, an icon listed as “Arrow Back” would be used as:

<Icon>arrow_back</Icon>

Tile icons

The <TileIcon> component is very similar but styled slightly differently to the <Icon> component, adding padding and a background colour to create a more “boxed” effect. It accepts the name of the icon as children, the colour of the background is set using the colour prop. It will accept ‘green’, ‘blue’, ‘grey’, ‘yellow’ or ‘orange’ as colour props. If no colour set, the background will default to a light grey background colour.

You can also override these colours by passing in a className prop.

Here is the default grey, and a blue version:

<TileIcon>shopping_cart</TileIcon>
<TileIcon colour="blue">bar_chart</TileIcon>

Status icons

The <StatusIcon> component is used to display the status of an item. It accepts a single prop status, which can be one of active, warning, error, waiting or hidden.

Also accepts an optional className prop.

Styling

The preferred way to style both is by adding a className prop. This will allow you to set a color and font-size in CSS.

Using with other components

• Use icons with buttons