@mdui/icons is a standalone package that encompasses all Material Icons. Each icon is encapsulated in a separate file, facilitating selective imports. This approach can significantly decrease the bundle size of your project, compared to using the <mdui-icon> component.


You can install the package independently:

npm install @mdui/icons --save


After installation, you can import the necessary icon files:

import '@mdui/icons/search.js';

Then, you can utilize the corresponding icon component in your HTML:

FilledOutlinedRoundedSharpTwo tone
import '@mdui/icons/.js';
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