@mapp-digital/mapp-fonts
Version:
A collection of fonts used in Mapp UIs.
2,043 lines (1,596 loc) • 51 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mapp-fonts</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
text-align: center;
background-color: #f5f8fa;
}
.preview {
width: 120px;
display: inline-block;
margin: 10px;
}
.preview .inner {
display: inline-block;
width: 100%;
text-align: center;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
height: 60px;
}
.preview .inner .mui-icons {
font-size: 40px;
color: #4e6080;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 12px;
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="mapp-fonts.css" />
</head>
<body>
<h1>mapp-fonts</h1>
<div class="preview">
<span class="inner">
<i class="mui-icons">accounts_inv</i>
</span>
<br>
<span class='label'>accounts_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">accounts</i>
</span>
<br>
<span class='label'>accounts</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">adcode</i>
</span>
<br>
<span class='label'>adcode</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">add</i>
</span>
<br>
<span class='label'>add</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">administration_inv</i>
</span>
<br>
<span class='label'>administration_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">administration</i>
</span>
<br>
<span class='label'>administration</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">app_aquire</i>
</span>
<br>
<span class='label'>app_aquire</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">app_empower</i>
</span>
<br>
<span class='label'>app_empower</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">app_engage</i>
</span>
<br>
<span class='label'>app_engage</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">app_intelligence</i>
</span>
<br>
<span class='label'>app_intelligence</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">app-switcher</i>
</span>
<br>
<span class='label'>app-switcher</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">archive</i>
</span>
<br>
<span class='label'>archive</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-down-double</i>
</span>
<br>
<span class='label'>arrow-down-double</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-left-double</i>
</span>
<br>
<span class='label'>arrow-left-double</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-left</i>
</span>
<br>
<span class='label'>arrow-left</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-right-double</i>
</span>
<br>
<span class='label'>arrow-right-double</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-right</i>
</span>
<br>
<span class='label'>arrow-right</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">arrow-up-double</i>
</span>
<br>
<span class='label'>arrow-up-double</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">bell_inv</i>
</span>
<br>
<span class='label'>bell_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">bell</i>
</span>
<br>
<span class='label'>bell</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">bulb_inv</i>
</span>
<br>
<span class='label'>bulb_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">bulb</i>
</span>
<br>
<span class='label'>bulb</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">calendar</i>
</span>
<br>
<span class='label'>calendar</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">campaigns_inv</i>
</span>
<br>
<span class='label'>campaigns_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">campaigns</i>
</span>
<br>
<span class='label'>campaigns</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">caret-up-down-asc</i>
</span>
<br>
<span class='label'>caret-up-down-asc</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">caret-up-down-dec</i>
</span>
<br>
<span class='label'>caret-up-down-dec</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">caret-up-down</i>
</span>
<br>
<span class='label'>caret-up-down</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">categories_inv</i>
</span>
<br>
<span class='label'>categories_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">categories</i>
</span>
<br>
<span class='label'>categories</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">changelog_inv</i>
</span>
<br>
<span class='label'>changelog_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">changelog</i>
</span>
<br>
<span class='label'>changelog</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-ampmail</i>
</span>
<br>
<span class='label'>channel-ampmail</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-directmail</i>
</span>
<br>
<span class='label'>channel-directmail</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-email</i>
</span>
<br>
<span class='label'>channel-email</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-in-app</i>
</span>
<br>
<span class='label'>channel-in-app</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-mobile-push</i>
</span>
<br>
<span class='label'>channel-mobile-push</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-sms</i>
</span>
<br>
<span class='label'>channel-sms</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">channel-web-push</i>
</span>
<br>
<span class='label'>channel-web-push</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">check</i>
</span>
<br>
<span class='label'>check</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">chevron-down</i>
</span>
<br>
<span class='label'>chevron-down</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">chevron-left</i>
</span>
<br>
<span class='label'>chevron-left</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">chevron-right</i>
</span>
<br>
<span class='label'>chevron-right</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">chevron-up-down</i>
</span>
<br>
<span class='label'>chevron-up-down</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">chevron-up</i>
</span>
<br>
<span class='label'>chevron-up</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">clock_inv</i>
</span>
<br>
<span class='label'>clock_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">clock</i>
</span>
<br>
<span class='label'>clock</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">close</i>
</span>
<br>
<span class='label'>close</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">compress</i>
</span>
<br>
<span class='label'>compress</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">connection_inv</i>
</span>
<br>
<span class='label'>connection_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">connection</i>
</span>
<br>
<span class='label'>connection</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">containers_inv</i>
</span>
<br>
<span class='label'>containers_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">containers</i>
</span>
<br>
<span class='label'>containers</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">contents_inv</i>
</span>
<br>
<span class='label'>contents_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">contents</i>
</span>
<br>
<span class='label'>contents</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">context-menu</i>
</span>
<br>
<span class='label'>context-menu</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">copy_inv</i>
</span>
<br>
<span class='label'>copy_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">copy</i>
</span>
<br>
<span class='label'>copy</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">create-copy-from-version</i>
</span>
<br>
<span class='label'>create-copy-from-version</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">create-new_inv</i>
</span>
<br>
<span class='label'>create-new_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">create-new</i>
</span>
<br>
<span class='label'>create-new</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">custom-date-range_inv</i>
</span>
<br>
<span class='label'>custom-date-range_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">custom-date-range</i>
</span>
<br>
<span class='label'>custom-date-range</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">custom-figures_inv</i>
</span>
<br>
<span class='label'>custom-figures_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">custom-figures</i>
</span>
<br>
<span class='label'>custom-figures</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">dashboard_inv</i>
</span>
<br>
<span class='label'>dashboard_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">dashboard</i>
</span>
<br>
<span class='label'>dashboard</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">device-desktop</i>
</span>
<br>
<span class='label'>device-desktop</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">device-phone</i>
</span>
<br>
<span class='label'>device-phone</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">device-tablet</i>
</span>
<br>
<span class='label'>device-tablet</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">divider</i>
</span>
<br>
<span class='label'>divider</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document-analytic-report</i>
</span>
<br>
<span class='label'>document-analytic-report</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document-blank</i>
</span>
<br>
<span class='label'>document-blank</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document-csv</i>
</span>
<br>
<span class='label'>document-csv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document-pdf</i>
</span>
<br>
<span class='label'>document-pdf</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document-xls</i>
</span>
<br>
<span class='label'>document-xls</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">document</i>
</span>
<br>
<span class='label'>document</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">documentation_inv</i>
</span>
<br>
<span class='label'>documentation_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">documentation</i>
</span>
<br>
<span class='label'>documentation</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">download</i>
</span>
<br>
<span class='label'>download</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">drag-handle</i>
</span>
<br>
<span class='label'>drag-handle</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">ecommerce_inv</i>
</span>
<br>
<span class='label'>ecommerce_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">ecommerce</i>
</span>
<br>
<span class='label'>ecommerce</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit_inv</i>
</span>
<br>
<span class='label'>edit_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit-code</i>
</span>
<br>
<span class='label'>edit-code</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit-pen</i>
</span>
<br>
<span class='label'>edit-pen</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit-split</i>
</span>
<br>
<span class='label'>edit-split</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit-visual</i>
</span>
<br>
<span class='label'>edit-visual</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">edit</i>
</span>
<br>
<span class='label'>edit</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">error_inv</i>
</span>
<br>
<span class='label'>error_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">error</i>
</span>
<br>
<span class='label'>error</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">expand</i>
</span>
<br>
<span class='label'>expand</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">export</i>
</span>
<br>
<span class='label'>export</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">feedback_inv</i>
</span>
<br>
<span class='label'>feedback_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">feedback</i>
</span>
<br>
<span class='label'>feedback</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">filter_inv</i>
</span>
<br>
<span class='label'>filter_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">filter</i>
</span>
<br>
<span class='label'>filter</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder_inv</i>
</span>
<br>
<span class='label'>folder_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-add_inv</i>
</span>
<br>
<span class='label'>folder-add_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-add</i>
</span>
<br>
<span class='label'>folder-add</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-move_inv</i>
</span>
<br>
<span class='label'>folder-move_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-move</i>
</span>
<br>
<span class='label'>folder-move</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-remove_inv</i>
</span>
<br>
<span class='label'>folder-remove_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder-remove</i>
</span>
<br>
<span class='label'>folder-remove</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">folder</i>
</span>
<br>
<span class='label'>folder</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">hamburger-menu</i>
</span>
<br>
<span class='label'>hamburger-menu</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">heart_inv</i>
</span>
<br>
<span class='label'>heart_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">heart</i>
</span>
<br>
<span class='label'>heart</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">help_inv</i>
</span>
<br>
<span class='label'>help_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">help</i>
</span>
<br>
<span class='label'>help</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">hide</i>
</span>
<br>
<span class='label'>hide</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">image</i>
</span>
<br>
<span class='label'>image</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">import</i>
</span>
<br>
<span class='label'>import</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">info_inv</i>
</span>
<br>
<span class='label'>info_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">info</i>
</span>
<br>
<span class='label'>info</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">integrations_inv</i>
</span>
<br>
<span class='label'>integrations_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">integrations</i>
</span>
<br>
<span class='label'>integrations</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">json</i>
</span>
<br>
<span class='label'>json</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">key</i>
</span>
<br>
<span class='label'>key</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">link</i>
</span>
<br>
<span class='label'>link</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">lock</i>
</span>
<br>
<span class='label'>lock</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">magic_inv</i>
</span>
<br>
<span class='label'>magic_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">magic</i>
</span>
<br>
<span class='label'>magic</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">mapp-m</i>
</span>
<br>
<span class='label'>mapp-m</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">marketing_inv</i>
</span>
<br>
<span class='label'>marketing_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">marketing</i>
</span>
<br>
<span class='label'>marketing</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">messages_inv</i>
</span>
<br>
<span class='label'>messages_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">messages</i>
</span>
<br>
<span class='label'>messages</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">net-path_inv</i>
</span>
<br>
<span class='label'>net-path_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">net-path</i>
</span>
<br>
<span class='label'>net-path</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">note_inv</i>
</span>
<br>
<span class='label'>note_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">note</i>
</span>
<br>
<span class='label'>note</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">notifications_inv</i>
</span>
<br>
<span class='label'>notifications_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">notifications</i>
</span>
<br>
<span class='label'>notifications</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">number</i>
</span>
<br>
<span class='label'>number</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">parameters_inv</i>
</span>
<br>
<span class='label'>parameters_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">parameters</i>
</span>
<br>
<span class='label'>parameters</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">placements_inv</i>
</span>
<br>
<span class='label'>placements_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">placements</i>
</span>
<br>
<span class='label'>placements</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">play_inv</i>
</span>
<br>
<span class='label'>play_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">play</i>
</span>
<br>
<span class='label'>play</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">plugins_inv</i>
</span>
<br>
<span class='label'>plugins_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">plugins</i>
</span>
<br>
<span class='label'>plugins</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">prio-rev</i>
</span>
<br>
<span class='label'>prio-rev</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">prio</i>
</span>
<br>
<span class='label'>prio</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">productfeed_inv</i>
</span>
<br>
<span class='label'>productfeed_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">productfeed</i>
</span>
<br>
<span class='label'>productfeed</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">profile_inv</i>
</span>
<br>
<span class='label'>profile_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">profile</i>
</span>
<br>
<span class='label'>profile</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">release-notes_inv</i>
</span>
<br>
<span class='label'>release-notes_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">release-notes</i>
</span>
<br>
<span class='label'>release-notes</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">remove</i>
</span>
<br>
<span class='label'>remove</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">reports_inv</i>
</span>
<br>
<span class='label'>reports_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">reports</i>
</span>
<br>
<span class='label'>reports</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">reset-pw</i>
</span>
<br>
<span class='label'>reset-pw</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">reset</i>
</span>
<br>
<span class='label'>reset</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">restore-version</i>
</span>
<br>
<span class='label'>restore-version</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">roles_inv</i>
</span>
<br>
<span class='label'>roles_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">roles</i>
</span>
<br>
<span class='label'>roles</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">rules_inv</i>
</span>
<br>
<span class='label'>rules_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">rules</i>
</span>
<br>
<span class='label'>rules</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">search-replace</i>
</span>
<br>
<span class='label'>search-replace</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">search</i>
</span>
<br>
<span class='label'>search</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">send-plane_inv</i>
</span>
<br>
<span class='label'>send-plane_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">send-plane</i>
</span>
<br>
<span class='label'>send-plane</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">settings_inv</i>
</span>
<br>
<span class='label'>settings_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">settings</i>
</span>
<br>
<span class='label'>settings</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">show</i>
</span>
<br>
<span class='label'>show</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">smart-snippet_inv</i>
</span>
<br>
<span class='label'>smart-snippet_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">smart-snippet</i>
</span>
<br>
<span class='label'>smart-snippet</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-alphabetical-asc</i>
</span>
<br>
<span class='label'>sort-alphabetical-asc</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-alphabetical-dec</i>
</span>
<br>
<span class='label'>sort-alphabetical-dec</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-alphabetical</i>
</span>
<br>
<span class='label'>sort-alphabetical</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-chronological-asc</i>
</span>
<br>
<span class='label'>sort-chronological-asc</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-chronological-dec</i>
</span>
<br>
<span class='label'>sort-chronological-dec</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-chronological</i>
</span>
<br>
<span class='label'>sort-chronological</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-list-asc</i>
</span>
<br>
<span class='label'>sort-list-asc</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-list-dec</i>
</span>
<br>
<span class='label'>sort-list-dec</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-list</i>
</span>
<br>
<span class='label'>sort-list</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-numeric-asc</i>
</span>
<br>
<span class='label'>sort-numeric-asc</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-numeric-dec</i>
</span>
<br>
<span class='label'>sort-numeric-dec</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sort-numeric</i>
</span>
<br>
<span class='label'>sort-numeric</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">star_inv</i>
</span>
<br>
<span class='label'>star_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">star</i>
</span>
<br>
<span class='label'>star</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">statistics_inv</i>
</span>
<br>
<span class='label'>statistics_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">statistics</i>
</span>
<br>
<span class='label'>statistics</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">stop_inv</i>
</span>
<br>
<span class='label'>stop_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">stop</i>
</span>
<br>
<span class='label'>stop</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">streams_inv</i>
</span>
<br>
<span class='label'>streams_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">streams</i>
</span>
<br>
<span class='label'>streams</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">success_inv</i>
</span>
<br>
<span class='label'>success_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">success</i>
</span>
<br>
<span class='label'>success</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">sync</i>
</span>
<br>
<span class='label'>sync</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">targetgroups_inv</i>
</span>
<br>
<span class='label'>targetgroups_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">targetgroups</i>
</span>
<br>
<span class='label'>targetgroups</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">time</i>
</span>
<br>
<span class='label'>time</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">topmenu-chevron-down</i>
</span>
<br>
<span class='label'>topmenu-chevron-down</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trash_inv</i>
</span>
<br>
<span class='label'>trash_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trash</i>
</span>
<br>
<span class='label'>trash</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trend-down</i>
</span>
<br>
<span class='label'>trend-down</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trend-neutral</i>
</span>
<br>
<span class='label'>trend-neutral</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trend-up</i>
</span>
<br>
<span class='label'>trend-up</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trigger_inv</i>
</span>
<br>
<span class='label'>trigger_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">trigger</i>
</span>
<br>
<span class='label'>trigger</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">unarchive</i>
</span>
<br>
<span class='label'>unarchive</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">unlink</i>
</span>
<br>
<span class='label'>unlink</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">unlock</i>
</span>
<br>
<span class='label'>unlock</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">upload</i>
</span>
<br>
<span class='label'>upload</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">user_inv</i>
</span>
<br>
<span class='label'>user_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">user-add_inv</i>
</span>
<br>
<span class='label'>user-add_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">user-add</i>
</span>
<br>
<span class='label'>user-add</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">user</i>
</span>
<br>
<span class='label'>user</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">users_inv</i>
</span>
<br>
<span class='label'>users_inv</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">users</i>
</span>
<br>
<span class='label'>users</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-code</i>
</span>
<br>
<span class='label'>view-code</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-details</i>
</span>
<br>
<span class='label'>view-details</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-folder</i>
</span>
<br>
<span class='label'>view-folder</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-gallery</i>
</span>
<br>
<span class='label'>view-gallery</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-list</i>
</span>
<br>
<span class='label'>view-list</span>
</div>
<div class="preview">
<span class="inner">
<i class="mui-icons">view-notifications</i>
</span>
<br>
<span class='label'>view-notifications</span>
</div>
<div class="preview">
<span class="inner">
<i class=