ListItemIcon

Overview

ListItemIcon is used to display an icon in ListItem. With ListItemIcon Properties, System will let you import several Icons from your computer or other sources that need to be displayed.

Please refer to this for more information: https://mui.com/material-ui/api/list-item-icon/.

Import

CODE

import { ListItemButton, ListItemIcon } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size includes Width and Height with many selectable Size Units.
Layout	Position: None Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Icon	Icon: Disabled	The component Icon includes Icon and File-upload button.
General	Opacity: 100%	The component General includes Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<ListItemIcon  
                    sx={{':focus': {'margin': '15px 20px 20px','padding': '20px 165px 20px 20px',
                    'width': '150px','height': '200px','position': 'relative',
                    'top': '15px','bottom': '15px','right': '25px','left': '25px',
                    'backgroundColor': '#d85d5dff',},}}>
                    <img alt="Image" src={Icon800pxSignCheckIcon} />
</ListItemIcon>

Related Component

ListItemButton