You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
plain-ui/src/icons/iconfont/icons.html

1685 lines
38 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icons</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
text-align: center;
}
.preview {
width: 100px;
display: inline-block;
margin: 10px;
}
.preview .inner {
display: inline-block;
width: 100%;
text-align: center;
background: #f5f5f5;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.preview .inner i {
line-height: 85px;
font-size: 40px;
color: #333;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
font-family: Monaco, monospace;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
color: #666;
}
</style>
<link rel="stylesheet" type="text/css" href="icons.css" />
</head>
<body>
<h1>icons</h1>
<div class="preview">
<span class="inner">
<i class=" mi-add"></i>
</span>
<br>
<span class='label'>add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-archive"></i>
</span>
<br>
<span class='label'>archive</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-down"></i>
</span>
<br>
<span class='label'>arrow-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-left-down"></i>
</span>
<br>
<span class='label'>arrow-left-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-left-up"></i>
</span>
<br>
<span class='label'>arrow-left-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-left"></i>
</span>
<br>
<span class='label'>arrow-left</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-right-down"></i>
</span>
<br>
<span class='label'>arrow-right-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-right-up"></i>
</span>
<br>
<span class='label'>arrow-right-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-right"></i>
</span>
<br>
<span class='label'>arrow-right</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-arrow-up"></i>
</span>
<br>
<span class='label'>arrow-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-attachment"></i>
</span>
<br>
<span class='label'>attachment</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-backspace"></i>
</span>
<br>
<span class='label'>backspace</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-ban"></i>
</span>
<br>
<span class='label'>ban</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-bar-chart-alt"></i>
</span>
<br>
<span class='label'>bar-chart-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-bar-chart"></i>
</span>
<br>
<span class='label'>bar-chart</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-board"></i>
</span>
<br>
<span class='label'>board</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-bold"></i>
</span>
<br>
<span class='label'>bold</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-book"></i>
</span>
<br>
<span class='label'>book</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-bookmark"></i>
</span>
<br>
<span class='label'>bookmark</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-calendar"></i>
</span>
<br>
<span class='label'>calendar</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-call"></i>
</span>
<br>
<span class='label'>call</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-camera"></i>
</span>
<br>
<span class='label'>camera</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-caret-down"></i>
</span>
<br>
<span class='label'>caret-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-caret-left"></i>
</span>
<br>
<span class='label'>caret-left</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-caret-right"></i>
</span>
<br>
<span class='label'>caret-right</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-caret-up"></i>
</span>
<br>
<span class='label'>caret-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-check"></i>
</span>
<br>
<span class='label'>check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-double-down"></i>
</span>
<br>
<span class='label'>chevron-double-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-double-left"></i>
</span>
<br>
<span class='label'>chevron-double-left</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-double-right"></i>
</span>
<br>
<span class='label'>chevron-double-right</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-double-up"></i>
</span>
<br>
<span class='label'>chevron-double-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-down"></i>
</span>
<br>
<span class='label'>chevron-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-left"></i>
</span>
<br>
<span class='label'>chevron-left</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-right"></i>
</span>
<br>
<span class='label'>chevron-right</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-chevron-up"></i>
</span>
<br>
<span class='label'>chevron-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-add"></i>
</span>
<br>
<span class='label'>circle-add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-arrow-down"></i>
</span>
<br>
<span class='label'>circle-arrow-down</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-arrow-left"></i>
</span>
<br>
<span class='label'>circle-arrow-left</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-arrow-right"></i>
</span>
<br>
<span class='label'>circle-arrow-right</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-arrow-up"></i>
</span>
<br>
<span class='label'>circle-arrow-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-check"></i>
</span>
<br>
<span class='label'>circle-check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-error"></i>
</span>
<br>
<span class='label'>circle-error</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-help"></i>
</span>
<br>
<span class='label'>circle-help</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-information"></i>
</span>
<br>
<span class='label'>circle-information</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-remove"></i>
</span>
<br>
<span class='label'>circle-remove</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle-warning"></i>
</span>
<br>
<span class='label'>circle-warning</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-circle"></i>
</span>
<br>
<span class='label'>circle</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-clipboard-check"></i>
</span>
<br>
<span class='label'>clipboard-check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-clipboard-list"></i>
</span>
<br>
<span class='label'>clipboard-list</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-clipboard"></i>
</span>
<br>
<span class='label'>clipboard</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-clock"></i>
</span>
<br>
<span class='label'>clock</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-close"></i>
</span>
<br>
<span class='label'>close</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-cloud-download"></i>
</span>
<br>
<span class='label'>cloud-download</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-cloud-upload"></i>
</span>
<br>
<span class='label'>cloud-upload</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-cloud"></i>
</span>
<br>
<span class='label'>cloud</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-cloudy"></i>
</span>
<br>
<span class='label'>cloudy</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-comment"></i>
</span>
<br>
<span class='label'>comment</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-compass"></i>
</span>
<br>
<span class='label'>compass</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-computer"></i>
</span>
<br>
<span class='label'>computer</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-copy"></i>
</span>
<br>
<span class='label'>copy</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-credit-card"></i>
</span>
<br>
<span class='label'>credit-card</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-database"></i>
</span>
<br>
<span class='label'>database</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-delete-alt"></i>
</span>
<br>
<span class='label'>delete-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-delete"></i>
</span>
<br>
<span class='label'>delete</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document-add"></i>
</span>
<br>
<span class='label'>document-add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document-check"></i>
</span>
<br>
<span class='label'>document-check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document-download"></i>
</span>
<br>
<span class='label'>document-download</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document-empty"></i>
</span>
<br>
<span class='label'>document-empty</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document-remove"></i>
</span>
<br>
<span class='label'>document-remove</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-document"></i>
</span>
<br>
<span class='label'>document</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-download"></i>
</span>
<br>
<span class='label'>download</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-drag"></i>
</span>
<br>
<span class='label'>drag</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-drop"></i>
</span>
<br>
<span class='label'>drop</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-edit-alt"></i>
</span>
<br>
<span class='label'>edit-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-edit"></i>
</span>
<br>
<span class='label'>edit</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-email"></i>
</span>
<br>
<span class='label'>email</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-enter"></i>
</span>
<br>
<span class='label'>enter</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-expand"></i>
</span>
<br>
<span class='label'>expand</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-export"></i>
</span>
<br>
<span class='label'>export</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-external-link"></i>
</span>
<br>
<span class='label'>external-link</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-eye-off"></i>
</span>
<br>
<span class='label'>eye-off</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-eye"></i>
</span>
<br>
<span class='label'>eye</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-favorite"></i>
</span>
<br>
<span class='label'>favorite</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-filter-1"></i>
</span>
<br>
<span class='label'>filter-1</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-filter-alt"></i>
</span>
<br>
<span class='label'>filter-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-filter"></i>
</span>
<br>
<span class='label'>filter</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-flag"></i>
</span>
<br>
<span class='label'>flag</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-fog"></i>
</span>
<br>
<span class='label'>fog</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-folder-add"></i>
</span>
<br>
<span class='label'>folder-add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-folder-check"></i>
</span>
<br>
<span class='label'>folder-check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-folder-download"></i>
</span>
<br>
<span class='label'>folder-download</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-folder-remove"></i>
</span>
<br>
<span class='label'>folder-remove</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-folder"></i>
</span>
<br>
<span class='label'>folder</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-grid"></i>
</span>
<br>
<span class='label'>grid</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-heart"></i>
</span>
<br>
<span class='label'>heart</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-home"></i>
</span>
<br>
<span class='label'>home</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-image"></i>
</span>
<br>
<span class='label'>image</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-inbox"></i>
</span>
<br>
<span class='label'>inbox</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-italic"></i>
</span>
<br>
<span class='label'>italic</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-laptop"></i>
</span>
<br>
<span class='label'>laptop</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-layers"></i>
</span>
<br>
<span class='label'>layers</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-layout"></i>
</span>
<br>
<span class='label'>layout</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-link-alt"></i>
</span>
<br>
<span class='label'>link-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-link"></i>
</span>
<br>
<span class='label'>link</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-list"></i>
</span>
<br>
<span class='label'>list</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-location"></i>
</span>
<br>
<span class='label'>location</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-lock"></i>
</span>
<br>
<span class='label'>lock</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-log-in"></i>
</span>
<br>
<span class='label'>log-in</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-log-out"></i>
</span>
<br>
<span class='label'>log-out</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-map"></i>
</span>
<br>
<span class='label'>map</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-megaphone"></i>
</span>
<br>
<span class='label'>megaphone</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-menu"></i>
</span>
<br>
<span class='label'>menu</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-message-alt"></i>
</span>
<br>
<span class='label'>message-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-message"></i>
</span>
<br>
<span class='label'>message</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-minimize"></i>
</span>
<br>
<span class='label'>minimize</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-mobile"></i>
</span>
<br>
<span class='label'>mobile</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-moon"></i>
</span>
<br>
<span class='label'>moon</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-next"></i>
</span>
<br>
<span class='label'>next</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-notification-off"></i>
</span>
<br>
<span class='label'>notification-off</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-notification"></i>
</span>
<br>
<span class='label'>notification</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-options-horizontal"></i>
</span>
<br>
<span class='label'>options-horizontal</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-options-vertical"></i>
</span>
<br>
<span class='label'>options-vertical</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-pause"></i>
</span>
<br>
<span class='label'>pause</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-pen"></i>
</span>
<br>
<span class='label'>pen</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-percentage"></i>
</span>
<br>
<span class='label'>percentage</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-pin"></i>
</span>
<br>
<span class='label'>pin</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-play"></i>
</span>
<br>
<span class='label'>play</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-previous"></i>
</span>
<br>
<span class='label'>previous</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-print"></i>
</span>
<br>
<span class='label'>print</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-rain"></i>
</span>
<br>
<span class='label'>rain</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-refresh"></i>
</span>
<br>
<span class='label'>refresh</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-remove"></i>
</span>
<br>
<span class='label'>remove</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-reorder-alt"></i>
</span>
<br>
<span class='label'>reorder-alt</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-reorder"></i>
</span>
<br>
<span class='label'>reorder</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-repeat"></i>
</span>
<br>
<span class='label'>repeat</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-save"></i>
</span>
<br>
<span class='label'>save</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-search"></i>
</span>
<br>
<span class='label'>search</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-select"></i>
</span>
<br>
<span class='label'>select</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-send"></i>
</span>
<br>
<span class='label'>send</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-settings"></i>
</span>
<br>
<span class='label'>settings</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-share"></i>
</span>
<br>
<span class='label'>share</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-shopping-cart-add"></i>
</span>
<br>
<span class='label'>shopping-cart-add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-shopping-cart"></i>
</span>
<br>
<span class='label'>shopping-cart</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-shuffle"></i>
</span>
<br>
<span class='label'>shuffle</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-snow"></i>
</span>
<br>
<span class='label'>snow</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-snowflake"></i>
</span>
<br>
<span class='label'>snowflake</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-sort"></i>
</span>
<br>
<span class='label'>sort</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-speakers"></i>
</span>
<br>
<span class='label'>speakers</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-stop"></i>
</span>
<br>
<span class='label'>stop</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-storm"></i>
</span>
<br>
<span class='label'>storm</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-strikethrough"></i>
</span>
<br>
<span class='label'>strikethrough</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-sun"></i>
</span>
<br>
<span class='label'>sun</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-sunrise-1"></i>
</span>
<br>
<span class='label'>sunrise-1</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-sunrise"></i>
</span>
<br>
<span class='label'>sunrise</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-sunset"></i>
</span>
<br>
<span class='label'>sunset</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-switch"></i>
</span>
<br>
<span class='label'>switch</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-table"></i>
</span>
<br>
<span class='label'>table</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-tablet"></i>
</span>
<br>
<span class='label'>tablet</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-tag"></i>
</span>
<br>
<span class='label'>tag</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-temperature"></i>
</span>
<br>
<span class='label'>temperature</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-text"></i>
</span>
<br>
<span class='label'>text</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-three-rows"></i>
</span>
<br>
<span class='label'>three-rows</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-two-columns"></i>
</span>
<br>
<span class='label'>two-columns</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-two-rows"></i>
</span>
<br>
<span class='label'>two-rows</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-underline"></i>
</span>
<br>
<span class='label'>underline</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-undo"></i>
</span>
<br>
<span class='label'>undo</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-unlock"></i>
</span>
<br>
<span class='label'>unlock</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-user-add"></i>
</span>
<br>
<span class='label'>user-add</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-user-check"></i>
</span>
<br>
<span class='label'>user-check</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-user-remove"></i>
</span>
<br>
<span class='label'>user-remove</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-user"></i>
</span>
<br>
<span class='label'>user</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-users"></i>
</span>
<br>
<span class='label'>users</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-volume-off"></i>
</span>
<br>
<span class='label'>volume-off</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-volume-up"></i>
</span>
<br>
<span class='label'>volume-up</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-warning"></i>
</span>
<br>
<span class='label'>warning</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-webcam"></i>
</span>
<br>
<span class='label'>webcam</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-wind"></i>
</span>
<br>
<span class='label'>wind</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-window"></i>
</span>
<br>
<span class='label'>window</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-zoom-in"></i>
</span>
<br>
<span class='label'>zoom-in</span>
</div>
<div class="preview">
<span class="inner">
<i class=" mi-zoom-out"></i>
</span>
<br>
<span class='label'>zoom-out</span>
</div>
</body>
</html>