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


Import the component:

import 'mdui/components/icon.js';

Import the TypeScript type:

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


<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:

  <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"/>


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.




Specifies the name of the Material Icons.


Specifies the path of the SVG icon.



The SVG icon content.

FilledOutlinedRoundedSharpTwo tone
<mdui-icon name=""></mdui-icon>
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
React Vue Angular
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint