Icon List

List of items with icons.

Changing the icon

Use the prop icon to render any icon from the Iconography

Icon color

color?: string

Use the prop color to change the color of the icon. The default value is currentColor. You can read more about currentColor here

Icon title

iconTitle?: string

Title allows you to insert invisible text for assistive software like screen readers. It's added as a title to the svg, has no effect on layout and is translatable by Google's translation service.

If the icon is purely decorative, it does not need to have a title.

Text size

textSize?: FontSizeStep

The font size of the list content can be controlled and changed using the prop textSize. The default value is mouse.

Icon size

iconSize?: BulbTypeStep

The size of the icon can be controlled and changed using the prop iconSize. The default value is undefined.

Alignment

align?: 'middle' | 'top'

The alignment of the text can be set to "middle" in the case of a large icon. By default the text is aligned to the top, which conforms to our design specifications for multiline list items.

Spacing

spacing?: BulbSpacingStep

The spacing between the icon list items can be customised: