Item List

component : order list
item
item
item

<ol className="item-list">
      <li>item</li>
      <li>item</li>
      <li>item</li>
</ol>

component : sub order list
item
item
item
item
item
item

<ol className="item-list">
      <li>item</li>
      <li>item</li>
      <li>item
            <ol className="item-list">
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
            </ol>
      </li>
</ol>

component : unorder list
item
item
item

<ul className="item-list">
      <li>item</li>
      <li>item</li>
      <li>item</li>
</ul>

component : sub unorder list
item
item
item
item
item
item

<ul className="item-list">
      <li>item</li>
      <li>item</li>
      <li>item
            <ul className="item-list">
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
            </ul>
      </li>
</ul>

import : 
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

component : default
item
item
item

<List>
     <ListItem>item</ListItem>
     <ListItem>item</ListItem>
     <ListItem>item</ListItem>
</List>

import : 
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import FolderIcon from '@mui/icons-material/Folder';

component : icon & text
item

<List>
      <ListItem>
           <ListItemIcon>
                 <FolderIcon />
           </ListItemIcon>
           <ListItemText primary="item"/>
      </ListItem>
</List>

import : 
import Avatar from '@mui/material/Avatar';

component : avatar & text
item

<List>
      <ListItem>
            <ListItemIcon>
                 <Avatar>
                       <FolderIcon />
                 </Avatar>
            </ListItemIcon>
            <ListItemText primary="item" />
      </ListItem>
</List>

import : 
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';

component : avatar & text with icon
item

<List>
      <ListItem secondaryAction={
           <IconButton edge="end" aria-label="delete">
                 <DeleteIcon />
           </IconButton>
      }>
            <ListItemIcon>
                  <Avatar>
                       <FolderIcon />
                  </Avatar>
            </ListItemIcon>
            <ListItemText primary="item" />
      </ListItem>
</List>

component : sticky subheader
I'm sticky 0
Item 0
Item 1
Item 2
I'm sticky 1
Item 0
Item 1
Item 2
I'm sticky 2
Item 0
Item 1
Item 2
I'm sticky 3
Item 0
Item 1
Item 2
I'm sticky 4
Item 0
Item 1
Item 2

<List
      sx={{
            width: '100%',
            maxWidth: 360,
            bgcolor: 'background.paper',
            position: 'relative',
            overflow: 'auto',
            maxHeight: 300,
            '& ul': { padding: 0 }, }}
     subheader={<li />}
>
      {[0, 1, 2, 3, 4].map((sectionId) => (
            <li key={`section-${sectionId}`}>
                  <ul>
                        <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
                        {[0, 1, 2].map((item) => (
                              <ListItem key={`item-${sectionId}-${item}`}>
                                    <ListItemText primary={`Item ${item}`} />
                              </ListItem>
                        ))}
                  </ul>
            </li>
      ))}
</List>