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>
如果图标用在扁平按钮或浮动按钮中，还需要添加类 mdui-icon-left 或 mdui-icon-right 使图标位于按钮左侧或右侧。
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>
第三方图标库
要使用第三方图标库，需要先引入第三方图标库的 CSS 文件。
然后在 <i> 元素中添加类 mdui-icon 和对应图标库的类名。
下面的实例使用的是 ionicons 的图标。
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-accent mdui-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>
CSS 类名列表
| 类名 |
效果 |
.mdui-icon |
定义图标元素 |
.material-icons |
定义 Material Icons 图标元素 |
.mdui-icon-left |
使图标位于按钮左侧 |
.mdui-icon-right |
使图标位于按钮右侧 |