Lists are a widely used interface element, found in almost every mobile app.
Lists can contain basic text, buttons, toggles, icons, and thumbnails.
List items can be any HTML element. The container element needs the `list` class, and each list item needs the `item` class.
`ionList` and `ionItem` easily support various interaction methods, such as swipe-to-edit, drag-to-reorder, and item deletion.
### Basic Usage:
...
[Try it »](#)
### List Dividers
We can use the `item-divider` class to create dividers for lists. By default, list items are distinguished by different background colors and bold text, but you can easily customize this.
[Try it »](#)
* * *
## Lists with Icons
We can specify icons on the left or right side of a list item.
Use `item-icon-left` for an icon on the left, and `item-icon-right` for an icon on the right. If you need icons on both sides, add both classes.
In the following example, we use `` tags in the list items, making each item clickable.
When list items use `` or `
YouTip