c-mdui-a
Version:
A fast way to build an application based on Material Design UI(MDUI).
1,014 lines (998 loc) • 304 kB
HTML
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>Material icons - MDUI 开发文档, Material Design 前端框架</title>
<link rel="stylesheet" href="assets/mdui-v0.4.2/css/mdui.min.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/github-gist.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/railscasts.css"/>
<link rel="stylesheet" href="assets/docs/css/docs.css"/>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a>
<a href="index.html" class="mdui-typo-title">文档</a>
<div class="mdui-toolbar-spacer"></div>
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
<a href="https://github.com/zdhxiong/mdui" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
</svg>
</a>
</div>
</header>
<div class="mdui-drawer" id="main-drawer">
<div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
<div class="mdui-list-item-content">开始使用</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="download.html" class="mdui-list-item mdui-ripple ">安装</a>
<a href="compatibility.html" class="mdui-list-item mdui-ripple ">兼容性</a>
<a href="jq.html" class="mdui-list-item mdui-ripple ">JavaScript 工具库</a>
<a href="global.html" class="mdui-list-item mdui-ripple ">JavaScript 全局方法</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
<div class="mdui-list-item-content">样式</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="color.html" class="mdui-list-item mdui-ripple ">颜色与主题</a>
<a href="font.html" class="mdui-list-item mdui-ripple ">字体</a>
<a href="grid.html" class="mdui-list-item mdui-ripple ">网格布局</a>
<a href="typo.html" class="mdui-list-item mdui-ripple ">排版</a>
<a href="icon.html" class="mdui-list-item mdui-ripple ">图标</a>
<a href="media.html" class="mdui-list-item mdui-ripple ">媒体</a>
<a href="helper.html" class="mdui-list-item mdui-ripple ">辅助类</a>
<a href="shadow.html" class="mdui-list-item mdui-ripple ">阴影</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
<div class="mdui-list-item-content">组件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="ripple.html" class="mdui-list-item mdui-ripple ">涟漪动画效果</a>
<a href="button.html" class="mdui-list-item mdui-ripple ">按钮</a>
<a href="fab.html" class="mdui-list-item mdui-ripple ">浮动操作按钮</a>
<a href="select.html" class="mdui-list-item mdui-ripple ">下拉选择</a>
<a href="divider.html" class="mdui-list-item mdui-ripple ">分隔线</a>
<a href="panel.html" class="mdui-list-item mdui-ripple ">可扩展面板</a>
<a href="textfield.html" class="mdui-list-item mdui-ripple ">文本框</a>
<a href="selection_control.html" class="mdui-list-item mdui-ripple ">选择控件</a>
<a href="slider.html" class="mdui-list-item mdui-ripple ">滑块</a>
<a href="list.html" class="mdui-list-item mdui-ripple ">列表</a>
<a href="list_control.html" class="mdui-list-item mdui-ripple ">列表控制</a>
<a href="grid_list.html" class="mdui-list-item mdui-ripple ">网格列表</a>
<a href="tab.html" class="mdui-list-item mdui-ripple ">Tab 选项卡</a>
<a href="toolbar.html" class="mdui-list-item mdui-ripple ">工具栏</a>
<a href="appbar.html" class="mdui-list-item mdui-ripple ">应用栏</a>
<a href="drawer.html" class="mdui-list-item mdui-ripple ">抽屉式导航</a>
<a href="bottom_nav.html" class="mdui-list-item mdui-ripple ">底部导航栏</a>
<a href="card.html" class="mdui-list-item mdui-ripple ">卡片</a>
<a href="chip.html" class="mdui-list-item mdui-ripple ">纸片</a>
<a href="tooltip.html" class="mdui-list-item mdui-ripple ">工具提示</a>
<a href="snackbar.html" class="mdui-list-item mdui-ripple ">Snackbar</a>
<a href="table.html" class="mdui-list-item mdui-ripple ">表格</a>
<a href="dialog.html" class="mdui-list-item mdui-ripple ">对话框</a>
<a href="menu.html" class="mdui-list-item mdui-ripple ">菜单</a>
<a href="progress.html" class="mdui-list-item mdui-ripple ">进度指示器</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i>
<div class="mdui-list-item-content">JavaScript 插件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="collapse.html" class="mdui-list-item mdui-ripple ">Collapse</a>
<a href="headroom.html" class="mdui-list-item mdui-ripple ">Headroom</a>
</div>
</div>
<div class="mdui-collapse-item mdui-collapse-item-open">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
<div class="mdui-list-item-content">资源</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="material_icon.html" class="mdui-list-item mdui-ripple mdui-list-item-active">Material 图标</a>
</div>
</div>
</div>
</div>
<a id="anchor-top"></a>
<style>
.icon-code {
-webkit-tap-highlight-color: transparent;
height: 120px;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
min-width: 108px;
}
.icon-code:hover,
.icon-code:focus {
background: #f0f0f0;
}
.icon-code .mdui-icon {
height: 48px;
width: 48px;
font-size: 48px;
margin-top: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: rgba(0, 0, 0, 0.54);
}
.icon-code .icon-caption {
color: #757575;
font-size: 12px;
margin: 16px auto 0 auto;
width: 85%;
z-index: 1;
word-break: break-all;
}
/* 深色主题 */
.mdui-theme-layout-dark .icon-code .mdui-icon {
color: rgba(255, 255, 255, 1);
}
.mdui-theme-layout-dark .icon-code:hover,
.mdui-theme-layout-dark .icon-code:focus {
background: #424242;
}
.mdui-theme-layout-dark .icon-code .icon-caption {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 840px) {
.icon-code-wrap {
padding: 5px;
}
.icon-code {
min-width: 102px;
}
.icon-code .mdui-icon {
width: 42px;
height: 42px;
font-size: 42px;
}
}
@media (max-width: 560px) {
.icon-code-wrap {
padding: 2px;
}
.icon-code {
min-width: 96px;
}
.icon-code .mdui-icon {
width: 36px;
height: 36px;
font-size: 36px;
}
}
.js-icon-code-copy {
cursor: pointer;
}
</style>
<div class="mdui-container" style="margin-bottom: 80px;">
<div class="mdui-row" style="margin: 80px 0;">
<div class="mdui-col-xs-12 mdui-col-sm-1 mdui-col-md-2"></div>
<div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-12 mdui-col-sm-10 mdui-col-md-8">
<label class="mdui-textfield-label">图标名或图标代码</label>
<input class="mdui-textfield-input" id="icon-search" type="text"/>
</div>
<div class="mdui-col-xs-12 mdui-col-sm-1 mdui-col-md-2"></div>
</div>
<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-6 mdui-row-lg-8">
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe84d;" data-icon-name="3d_rotation">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">3d_rotation</i>
<div class="icon-caption">3d_rotation</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xeb3b;" data-icon-name="ac_unit">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">ac_unit</i>
<div class="icon-caption">ac_unit</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe190;" data-icon-name="access_alarm">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">access_alarm</i>
<div class="icon-caption">access_alarm</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe191;" data-icon-name="access_alarms">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">access_alarms</i>
<div class="icon-caption">access_alarms</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe192;" data-icon-name="access_time">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">access_time</i>
<div class="icon-caption">access_time</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe84e;" data-icon-name="accessibility">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">accessibility</i>
<div class="icon-caption">accessibility</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe914;" data-icon-name="accessible">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">accessible</i>
<div class="icon-caption">accessible</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe84f;" data-icon-name="account_balance">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">account_balance</i>
<div class="icon-caption">account_balance</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe850;" data-icon-name="account_balance_wallet">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">account_balance_wallet</i>
<div class="icon-caption">account_balance_wallet</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe851;" data-icon-name="account_box">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">account_box</i>
<div class="icon-caption">account_box</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe853;" data-icon-name="account_circle">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">account_circle</i>
<div class="icon-caption">account_circle</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe60e;" data-icon-name="adb">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">adb</i>
<div class="icon-caption">adb</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe145;" data-icon-name="add">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add</i>
<div class="icon-caption">add</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe439;" data-icon-name="add_a_photo">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_a_photo</i>
<div class="icon-caption">add_a_photo</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe193;" data-icon-name="add_alarm">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_alarm</i>
<div class="icon-caption">add_alarm</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe003;" data-icon-name="add_alert">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_alert</i>
<div class="icon-caption">add_alert</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe146;" data-icon-name="add_box">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_box</i>
<div class="icon-caption">add_box</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe147;" data-icon-name="add_circle">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_circle</i>
<div class="icon-caption">add_circle</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe148;" data-icon-name="add_circle_outline">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_circle_outline</i>
<div class="icon-caption">add_circle_outline</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe567;" data-icon-name="add_location">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_location</i>
<div class="icon-caption">add_location</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe854;" data-icon-name="add_shopping_cart">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_shopping_cart</i>
<div class="icon-caption">add_shopping_cart</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe39d;" data-icon-name="add_to_photos">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_to_photos</i>
<div class="icon-caption">add_to_photos</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe05c;" data-icon-name="add_to_queue">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">add_to_queue</i>
<div class="icon-caption">add_to_queue</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe39e;" data-icon-name="adjust">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">adjust</i>
<div class="icon-caption">adjust</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe630;" data-icon-name="airline_seat_flat">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_flat</i>
<div class="icon-caption">airline_seat_flat</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe631;" data-icon-name="airline_seat_flat_angled">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_flat_angled</i>
<div class="icon-caption">airline_seat_flat_angled</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe632;" data-icon-name="airline_seat_individual_suite">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_individual_suite</i>
<div class="icon-caption">airline_seat_individual_suite</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe633;" data-icon-name="airline_seat_legroom_extra">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_legroom_extra</i>
<div class="icon-caption">airline_seat_legroom_extra</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe634;" data-icon-name="airline_seat_legroom_normal">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_legroom_normal</i>
<div class="icon-caption">airline_seat_legroom_normal</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe635;" data-icon-name="airline_seat_legroom_reduced">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_legroom_reduced</i>
<div class="icon-caption">airline_seat_legroom_reduced</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe636;" data-icon-name="airline_seat_recline_extra">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_recline_extra</i>
<div class="icon-caption">airline_seat_recline_extra</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe637;" data-icon-name="airline_seat_recline_normal">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airline_seat_recline_normal</i>
<div class="icon-caption">airline_seat_recline_normal</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe195;" data-icon-name="airplanemode_active">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airplanemode_active</i>
<div class="icon-caption">airplanemode_active</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe194;" data-icon-name="airplanemode_inactive">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airplanemode_inactive</i>
<div class="icon-caption">airplanemode_inactive</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe055;" data-icon-name="airplay">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airplay</i>
<div class="icon-caption">airplay</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xeb3c;" data-icon-name="airport_shuttle">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">airport_shuttle</i>
<div class="icon-caption">airport_shuttle</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe855;" data-icon-name="alarm">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">alarm</i>
<div class="icon-caption">alarm</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe856;" data-icon-name="alarm_add">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">alarm_add</i>
<div class="icon-caption">alarm_add</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe857;" data-icon-name="alarm_off">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">alarm_off</i>
<div class="icon-caption">alarm_off</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe858;" data-icon-name="alarm_on">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">alarm_on</i>
<div class="icon-caption">alarm_on</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe019;" data-icon-name="album">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">album</i>
<div class="icon-caption">album</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xeb3d;" data-icon-name="all_inclusive">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">all_inclusive</i>
<div class="icon-caption">all_inclusive</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe90b;" data-icon-name="all_out">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">all_out</i>
<div class="icon-caption">all_out</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe859;" data-icon-name="android">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">android</i>
<div class="icon-caption">android</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85a;" data-icon-name="announcement">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">announcement</i>
<div class="icon-caption">announcement</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c3;" data-icon-name="apps">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">apps</i>
<div class="icon-caption">apps</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe149;" data-icon-name="archive">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">archive</i>
<div class="icon-caption">archive</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c4;" data-icon-name="arrow_back">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_back</i>
<div class="icon-caption">arrow_back</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5db;" data-icon-name="arrow_downward">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_downward</i>
<div class="icon-caption">arrow_downward</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c5;" data-icon-name="arrow_drop_down">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_drop_down</i>
<div class="icon-caption">arrow_drop_down</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c6;" data-icon-name="arrow_drop_down_circle">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_drop_down_circle</i>
<div class="icon-caption">arrow_drop_down_circle</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c7;" data-icon-name="arrow_drop_up">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_drop_up</i>
<div class="icon-caption">arrow_drop_up</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5c8;" data-icon-name="arrow_forward">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_forward</i>
<div class="icon-caption">arrow_forward</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe5d8;" data-icon-name="arrow_upward">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">arrow_upward</i>
<div class="icon-caption">arrow_upward</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe060;" data-icon-name="art_track">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">art_track</i>
<div class="icon-caption">art_track</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85b;" data-icon-name="aspect_ratio">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">aspect_ratio</i>
<div class="icon-caption">aspect_ratio</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85c;" data-icon-name="assessment">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assessment</i>
<div class="icon-caption">assessment</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85d;" data-icon-name="assignment">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment</i>
<div class="icon-caption">assignment</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85e;" data-icon-name="assignment_ind">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment_ind</i>
<div class="icon-caption">assignment_ind</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe85f;" data-icon-name="assignment_late">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment_late</i>
<div class="icon-caption">assignment_late</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe860;" data-icon-name="assignment_return">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment_return</i>
<div class="icon-caption">assignment_return</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe861;" data-icon-name="assignment_returned">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment_returned</i>
<div class="icon-caption">assignment_returned</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe862;" data-icon-name="assignment_turned_in">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assignment_turned_in</i>
<div class="icon-caption">assignment_turned_in</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe39f;" data-icon-name="assistant">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assistant</i>
<div class="icon-caption">assistant</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a0;" data-icon-name="assistant_photo">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">assistant_photo</i>
<div class="icon-caption">assistant_photo</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe226;" data-icon-name="attach_file">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">attach_file</i>
<div class="icon-caption">attach_file</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe227;" data-icon-name="attach_money">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">attach_money</i>
<div class="icon-caption">attach_money</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe2bc;" data-icon-name="attachment">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">attachment</i>
<div class="icon-caption">attachment</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a1;" data-icon-name="audiotrack">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">audiotrack</i>
<div class="icon-caption">audiotrack</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe863;" data-icon-name="autorenew">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">autorenew</i>
<div class="icon-caption">autorenew</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe01b;" data-icon-name="av_timer">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">av_timer</i>
<div class="icon-caption">av_timer</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe14a;" data-icon-name="backspace">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">backspace</i>
<div class="icon-caption">backspace</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe864;" data-icon-name="backup">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">backup</i>
<div class="icon-caption">backup</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe19c;" data-icon-name="battery_alert">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">battery_alert</i>
<div class="icon-caption">battery_alert</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a3;" data-icon-name="battery_charging_full">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">battery_charging_full</i>
<div class="icon-caption">battery_charging_full</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a4;" data-icon-name="battery_full">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">battery_full</i>
<div class="icon-caption">battery_full</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a5;" data-icon-name="battery_std">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">battery_std</i>
<div class="icon-caption">battery_std</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a6;" data-icon-name="battery_unknown">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">battery_unknown</i>
<div class="icon-caption">battery_unknown</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xeb3e;" data-icon-name="beach_access">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">beach_access</i>
<div class="icon-caption">beach_access</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe52d;" data-icon-name="beenhere">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">beenhere</i>
<div class="icon-caption">beenhere</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe14b;" data-icon-name="block">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">block</i>
<div class="icon-caption">block</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a7;" data-icon-name="bluetooth">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bluetooth</i>
<div class="icon-caption">bluetooth</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe60f;" data-icon-name="bluetooth_audio">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bluetooth_audio</i>
<div class="icon-caption">bluetooth_audio</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a8;" data-icon-name="bluetooth_connected">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bluetooth_connected</i>
<div class="icon-caption">bluetooth_connected</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1a9;" data-icon-name="bluetooth_disabled">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bluetooth_disabled</i>
<div class="icon-caption">bluetooth_disabled</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1aa;" data-icon-name="bluetooth_searching">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bluetooth_searching</i>
<div class="icon-caption">bluetooth_searching</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a2;" data-icon-name="blur_circular">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">blur_circular</i>
<div class="icon-caption">blur_circular</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a3;" data-icon-name="blur_linear">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">blur_linear</i>
<div class="icon-caption">blur_linear</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a4;" data-icon-name="blur_off">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">blur_off</i>
<div class="icon-caption">blur_off</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a5;" data-icon-name="blur_on">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">blur_on</i>
<div class="icon-caption">blur_on</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe865;" data-icon-name="book">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">book</i>
<div class="icon-caption">book</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe866;" data-icon-name="bookmark">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bookmark</i>
<div class="icon-caption">bookmark</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe867;" data-icon-name="bookmark_border">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bookmark_border</i>
<div class="icon-caption">bookmark_border</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe228;" data-icon-name="border_all">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_all</i>
<div class="icon-caption">border_all</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe229;" data-icon-name="border_bottom">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_bottom</i>
<div class="icon-caption">border_bottom</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22a;" data-icon-name="border_clear">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_clear</i>
<div class="icon-caption">border_clear</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22b;" data-icon-name="border_color">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_color</i>
<div class="icon-caption">border_color</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22c;" data-icon-name="border_horizontal">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_horizontal</i>
<div class="icon-caption">border_horizontal</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22d;" data-icon-name="border_inner">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_inner</i>
<div class="icon-caption">border_inner</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22e;" data-icon-name="border_left">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_left</i>
<div class="icon-caption">border_left</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe22f;" data-icon-name="border_outer">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_outer</i>
<div class="icon-caption">border_outer</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe230;" data-icon-name="border_right">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_right</i>
<div class="icon-caption">border_right</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe231;" data-icon-name="border_style">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_style</i>
<div class="icon-caption">border_style</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe232;" data-icon-name="border_top">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_top</i>
<div class="icon-caption">border_top</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe233;" data-icon-name="border_vertical">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">border_vertical</i>
<div class="icon-caption">border_vertical</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe06b;" data-icon-name="branding_watermark">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">branding_watermark</i>
<div class="icon-caption">branding_watermark</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a6;" data-icon-name="brightness_1">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_1</i>
<div class="icon-caption">brightness_1</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a7;" data-icon-name="brightness_2">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_2</i>
<div class="icon-caption">brightness_2</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a8;" data-icon-name="brightness_3">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_3</i>
<div class="icon-caption">brightness_3</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3a9;" data-icon-name="brightness_4">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_4</i>
<div class="icon-caption">brightness_4</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3aa;" data-icon-name="brightness_5">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_5</i>
<div class="icon-caption">brightness_5</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3ab;" data-icon-name="brightness_6">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_6</i>
<div class="icon-caption">brightness_6</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3ac;" data-icon-name="brightness_7">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_7</i>
<div class="icon-caption">brightness_7</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1ab;" data-icon-name="brightness_auto">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_auto</i>
<div class="icon-caption">brightness_auto</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1ac;" data-icon-name="brightness_high">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_high</i>
<div class="icon-caption">brightness_high</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1ad;" data-icon-name="brightness_low">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_low</i>
<div class="icon-caption">brightness_low</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe1ae;" data-icon-name="brightness_medium">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brightness_medium</i>
<div class="icon-caption">brightness_medium</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3ad;" data-icon-name="broken_image">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">broken_image</i>
<div class="icon-caption">broken_image</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe3ae;" data-icon-name="brush">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">brush</i>
<div class="icon-caption">brush</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe6dd;" data-icon-name="bubble_chart">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bubble_chart</i>
<div class="icon-caption">bubble_chart</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe868;" data-icon-name="bug_report">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">bug_report</i>
<div class="icon-caption">bug_report</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe869;" data-icon-name="build">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">build</i>
<div class="icon-caption">build</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe43c;" data-icon-name="burst_mode">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">burst_mode</i>
<div class="icon-caption">burst_mode</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0af;" data-icon-name="business">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">business</i>
<div class="icon-caption">business</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xeb3f;" data-icon-name="business_center">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">business_center</i>
<div class="icon-caption">business_center</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe86a;" data-icon-name="cached">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">cached</i>
<div class="icon-caption">cached</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe7e9;" data-icon-name="cake">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">cake</i>
<div class="icon-caption">cake</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0b0;" data-icon-name="call">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">call</i>
<div class="icon-caption">call</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0b1;" data-icon-name="call_end">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">call_end</i>
<div class="icon-caption">call_end</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0b2;" data-icon-name="call_made">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">call_made</i>
<div class="icon-caption">call_made</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0b3;" data-icon-name="call_merge">
<div class="icon-code">
<i class="mdui-icon material-icons mdui-icon-dark">call_merge</i>
<div class="icon-caption">call_merge</div>
</div>
</div>
<div class="mdui-col icon-code-wrap" data-icon-code="&#xe0b4;" data-icon-name="call_missed">
<div class="icon-code">
<i class="mdui-ic