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: