menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

icon

MDUI has built-in 932 icons of Material Icons. In addition to these icons, you can also use third-party icons.

Related Reading

Material Design Design Guidelines: Style-Icon

Usage example

We listed all Material Icons Icon of, You can directly click the icon to copy the icon code.

codeplay_arrow
Example
check_box check_box check_box 
<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>

If the icon is used in a flat button or floating button, you also need to add a class mdui-icon-left or mdui-icon-right Place the icon on the left or right side of the button.

codeplay_arrow
Example
<button class="mdui-btn mdui-color-theme-accent mdui-ripple"><i class="mdui-icon mdui-icon-left material-icons">share</i> Share</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple"><i class="mdui-icon mdui-icon-right material-icons">share</i> Share</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple"><i class="mdui-icon mdui-icon-right material-icons">share</i> Share</button>
<button class="mdui-btn mdui-color-yellow" disabled><i class="mdui-icon mdui-icon-right material-icons">share</i> Share</button>

Third-party icon library

To use a third-party icon library, you need to first import the CSS file of the third-party icon library.

Then in <i> Add class to element mdui-icon And the class name of the corresponding icon library.

The following example uses ionicons Icon.

codeplay_arrow
Example
<link rel="stylesheet" href="ionicons.css"/>

<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon"><i class="mdui-icon ion-plus-round"></i></button>
<button class="mdui-btn mdui-color-theme-accentmdui-ripple"><i class="mdui-icon mdui-icon-left ion-share"></i> Share</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent"><i class="mdui-icon ion-plus-round"></i></button>

List of CSS class names

Class name effect
.mdui-icon Define icon elements
.material-icons Define Material Icons icon elements
.mdui-icon-left Make the icon to the left of the button
.mdui-icon-right Place the icon on the right side of the button
arrow_back Previous
typesetting
arrow_forward Next
media
Set document theme

Theme color

Main color

Accent color