Icon

A component that provides access to Material Icons through Iconify's lazy loading system. Icons are loaded on demand from the CDN. All the icons available can be found in the Iconify website or Material Icons.

Basic Usage

import yipit_dash_mui_components as dmc

dmc.Icon(icon="material-symbols:10k")
dmc.Icon(icon="material-icons:home")
dmc.Icon(icon="material-symbols:settings")

Icon Sets

The component supports two Material Icon sets:

• material-symbols: - Material Symbols
• material-icons: - Material Icons

# Material Symbols
dmc.Icon(icon="material-symbols:home")

# Material Icons
dmc.Icon(icon="material-icons:settings")

Props

Name	Type	Default	Description
icon	string	Required	Icon name in format: @api-provider:icon-prefix:icon-name. For Material icons, use material-symbols: or material-icons: prefix.
width	number	24	Icon width in pixels
height	number	24	Icon height in pixels
color	string	undefined	Icon color
rotate	0 | 1 | 2 | 3	undefined	Rotation in 90-degree increments (0=0°, 1=90°, 2=180°, 3=270°)
flip	"horizontal" | "vertical"	undefined	Flip the icon horizontally or vertically
inline	boolean	true	Whether to display as inline or block
style	React.CSSProperties	undefined	Additional CSS styles
className	string	undefined	Additional CSS class names
id	string	undefined	The ID of the component

Features

Sizes and Colors

Customize the icon size and color:

dmc.Icon(
    icon="material-symbols:favorite",
    width=32,
    height=32,
    color="blue"
)

Rotation and Flipping

Rotate or flip icons:

# Rotation
dmc.Icon(icon="material-symbols:arrow-right", rotate=1)  # 90 degrees
dmc.Icon(icon="material-symbols:arrow-right", rotate=2)  # 180 degrees

# Flipping
dmc.Icon(icon="material-symbols:arrow-right", flip="horizontal")
dmc.Icon(icon="material-symbols:arrow-right", flip="vertical")

Display Mode

Control how the icon displays within text:

# Inline display (default)
html.P(["Text with inline icon ", dmc.Icon(icon="material-symbols:info", inline=True)])

# Block display
html.P(["Text with block icon ", dmc.Icon(icon="material-symbols:info", inline=False)])

Complete Example

import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Icon Examples"),
    html.Div([
        # Basic icon
        dmc.Icon(
            icon="material-symbols:favorite",
            color="red",
            style={"marginRight": "8px"}
        ),
        # Rotated icon
        dmc.Icon(
            icon="material-symbols:arrow-right",
            rotate=1,
            style={"marginRight": "8px"}
        ),
        # Flipped icon
        dmc.Icon(
            icon="material-symbols:arrow-right",
            flip="horizontal"
        )
    ], style={"display": "flex", "alignItems": "center"})
])

if __name__ == "__main__":
    app.run(debug=True)

Browser Support

The Icon component uses the Iconify React component internally and loads icons on demand through a CDN.