MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

Icon

The Icon component represents common actions and supports both Material Icons and SVG icons.

Usage

Import the component:

import 'mdui/components/icon.js';

Import the TypeScript type:

import type { Icon } from 'mdui/components/icon.js';

Example:

<mdui-icon name="search"></mdui-icon>

Using Material Icons

To use Material Icons, import the CSS file for the desired variant: Filled, Outlined, Rounded, Sharp, or Two Tone.

<!-- Filled -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Outlined -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

<!-- Rounded -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">

<!-- Sharp -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

<!-- Two Tone -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

Use the name attribute to specify the icon, appending the variant name as a suffix (no suffix needed for Filled). Here's how to use the delete icon in all 5 variants:

<!-- Filled -->
<mdui-icon name="delete"></mdui-icon>

<!-- Outlined -->
<mdui-icon name="delete--outlined"></mdui-icon>

<!-- Rounded -->
<mdui-icon name="delete--rounded"></mdui-icon>

<!-- Sharp -->
<mdui-icon name="delete--sharp"></mdui-icon>

<!-- Two Tone -->
<mdui-icon name="delete--two-tone"></mdui-icon>

Search for icons directly using the Material Icons Search tool at the page bottom. Click an icon to copy its code to the clipboard.

mdui also provides a standalone package @mdui/icons, with each icon component as a separate file. This allows importing only needed icon components, without the entire icon library.

Using SVG Icon

The component supports SVG icons. Pass the SVG icon link to the src attribute:

<mdui-icon src="https://fonts.gstatic.com/s/i/materialicons/search/v17/24px.svg"></mdui-icon>

Or, pass the SVG content directly into the component's default slot:

<mdui-icon>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  </svg>
</mdui-icon>

Examples

Set Color

Change the icon color by setting the color CSS style of the <mdui-icon> element or its parent.

Set Size

Change the icon size by setting the font-size CSS style of the <mdui-icon> element or its parent.

API

Properties

AttributePropertyReflectTypeDefault
namenamestring-

Specifies the name of the Material Icons.

srcsrcstring-

Specifies the path of the SVG icon.

Slots

Name
(default)

The SVG icon content.

FilledOutlinedRoundedSharpTwo tone
<mdui-icon name=""></mdui-icon>
On this page