Icon
The Icon element displays a standalone icon from the Material Design Icons (MDI) library. Use it to add visual indicators, decorative icons, or action symbols to your pages.
Overview
Icons can stand alone as visual elements or accompany text and other elements. The Icon element supports:
- Over 7,000 icons from the MDI library
- Configurable size and color
- Horizontal alignment (left, center, right)
- Click events for navigation or actions
Adding an Icon
- Open the Website Builder
- Find Icon in the Elements panel (under Display)
- Drag it onto your page
- Configure the icon in the General Tab
Properties
General Tab
| Property | Description | Default |
|---|---|---|
| Icon Class | MDI icon class name (e.g., mdi-home, mdi-account) | mdi-star |
| Size | Icon size in pixels | 24 |
| Color | Icon color (hex value) | #333333 |
| Alignment | Horizontal alignment: left, center, or right | center |
Finding Icons
Browse the full icon library at Material Design Icons. Enter the icon name without the mdi- prefix or with it -- both work.
Use Cases
- Navigation indicators -- arrows, menus, home icons
- Status symbols -- checkmarks, warnings, info circles
- Decorative elements -- stars, hearts, badges
- Action buttons -- when combined with click events
Questions?
If you have any questions, please don't hesitate to contact us.