deb-fonts-materialdesignico.../preview.html

1134 lines
62 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Material Design Icons</title>
<style>
body {
margin: 0;
padding: 10px 20px;
background: #fff;
color: #222;
}
h1, div, footer {
font-family: "Helvetica Neue", Arial, sans-serif;
}
h1 {
margin: 0 0 20px;
font-size: 32px;
font-weight: normal;
}
.icons {
margin-bottom: 40px;
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.icons__item,
.icons__item i {
line-height: 2em;
cursor: pointer;
}
.icons__item:hover {
color: #3c90be;
}
.icons__item i {
display: inline-block;
width: 32px;
text-align: center;
}
.icons__item:hover i {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
footer {
margin-top: 40px;
font-size: 14px;
color: #999;
}
</style>
<link href="materialdesignicons.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Material Design Icons</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="account-box-outline"><i class="mdi mdi-account-box-outline"></i> mdi-account-box-outline</div>
<div class="icons__item" data-name="account-box"><i class="mdi mdi-account-box"></i> mdi-account-box</div>
<div class="icons__item" data-name="account-circle"><i class="mdi mdi-account-circle"></i> mdi-account-circle</div>
<div class="icons__item" data-name="account-location"><i class="mdi mdi-account-location"></i> mdi-account-location</div>
<div class="icons__item" data-name="account-multiple-outline"><i class="mdi mdi-account-multiple-outline"></i> mdi-account-multiple-outline</div>
<div class="icons__item" data-name="account-multiple-plus"><i class="mdi mdi-account-multiple-plus"></i> mdi-account-multiple-plus</div>
<div class="icons__item" data-name="account-multiple"><i class="mdi mdi-account-multiple"></i> mdi-account-multiple</div>
<div class="icons__item" data-name="account-outline"><i class="mdi mdi-account-outline"></i> mdi-account-outline</div>
<div class="icons__item" data-name="account-plus"><i class="mdi mdi-account-plus"></i> mdi-account-plus</div>
<div class="icons__item" data-name="account"><i class="mdi mdi-account"></i> mdi-account</div>
<div class="icons__item" data-name="airplane-off"><i class="mdi mdi-airplane-off"></i> mdi-airplane-off</div>
<div class="icons__item" data-name="airplane"><i class="mdi mdi-airplane"></i> mdi-airplane</div>
<div class="icons__item" data-name="alarm-check"><i class="mdi mdi-alarm-check"></i> mdi-alarm-check</div>
<div class="icons__item" data-name="alarm-off"><i class="mdi mdi-alarm-off"></i> mdi-alarm-off</div>
<div class="icons__item" data-name="alarm-plus"><i class="mdi mdi-alarm-plus"></i> mdi-alarm-plus</div>
<div class="icons__item" data-name="alarm"><i class="mdi mdi-alarm"></i> mdi-alarm</div>
<div class="icons__item" data-name="album"><i class="mdi mdi-album"></i> mdi-album</div>
<div class="icons__item" data-name="alert-box"><i class="mdi mdi-alert-box"></i> mdi-alert-box</div>
<div class="icons__item" data-name="alert-circle"><i class="mdi mdi-alert-circle"></i> mdi-alert-circle</div>
<div class="icons__item" data-name="alert-octagon"><i class="mdi mdi-alert-octagon"></i> mdi-alert-octagon</div>
<div class="icons__item" data-name="alert"><i class="mdi mdi-alert"></i> mdi-alert</div>
<div class="icons__item" data-name="android-debug-bridge"><i class="mdi mdi-android-debug-bridge"></i> mdi-android-debug-bridge</div>
<div class="icons__item" data-name="android"><i class="mdi mdi-android"></i> mdi-android</div>
<div class="icons__item" data-name="apple-mobileme"><i class="mdi mdi-apple-mobileme"></i> mdi-apple-mobileme</div>
<div class="icons__item" data-name="apple"><i class="mdi mdi-apple"></i> mdi-apple</div>
<div class="icons__item" data-name="appnet"><i class="mdi mdi-appnet"></i> mdi-appnet</div>
<div class="icons__item" data-name="apps"><i class="mdi mdi-apps"></i> mdi-apps</div>
<div class="icons__item" data-name="arrange-bring-forward"><i class="mdi mdi-arrange-bring-forward"></i> mdi-arrange-bring-forward</div>
<div class="icons__item" data-name="arrange-bring-to-front"><i class="mdi mdi-arrange-bring-to-front"></i> mdi-arrange-bring-to-front</div>
<div class="icons__item" data-name="arrange-send-backward"><i class="mdi mdi-arrange-send-backward"></i> mdi-arrange-send-backward</div>
<div class="icons__item" data-name="arrange-send-to-back"><i class="mdi mdi-arrange-send-to-back"></i> mdi-arrange-send-to-back</div>
<div class="icons__item" data-name="arrow-down-bold-circle-outline"><i class="mdi mdi-arrow-down-bold-circle-outline"></i> mdi-arrow-down-bold-circle-outline</div>
<div class="icons__item" data-name="arrow-down-bold-circle"><i class="mdi mdi-arrow-down-bold-circle"></i> mdi-arrow-down-bold-circle</div>
<div class="icons__item" data-name="arrow-down"><i class="mdi mdi-arrow-down"></i> mdi-arrow-down</div>
<div class="icons__item" data-name="arrow-left-bold-circle-outline"><i class="mdi mdi-arrow-left-bold-circle-outline"></i> mdi-arrow-left-bold-circle-outline</div>
<div class="icons__item" data-name="arrow-left-bold-circle"><i class="mdi mdi-arrow-left-bold-circle"></i> mdi-arrow-left-bold-circle</div>
<div class="icons__item" data-name="arrow-left"><i class="mdi mdi-arrow-left"></i> mdi-arrow-left</div>
<div class="icons__item" data-name="arrow-right-bold-circle-outline"><i class="mdi mdi-arrow-right-bold-circle-outline"></i> mdi-arrow-right-bold-circle-outline</div>
<div class="icons__item" data-name="arrow-right-bold-circle"><i class="mdi mdi-arrow-right-bold-circle"></i> mdi-arrow-right-bold-circle</div>
<div class="icons__item" data-name="arrow-right"><i class="mdi mdi-arrow-right"></i> mdi-arrow-right</div>
<div class="icons__item" data-name="arrow-up-bold-circle-outline"><i class="mdi mdi-arrow-up-bold-circle-outline"></i> mdi-arrow-up-bold-circle-outline</div>
<div class="icons__item" data-name="arrow-up-bold-circle"><i class="mdi mdi-arrow-up-bold-circle"></i> mdi-arrow-up-bold-circle</div>
<div class="icons__item" data-name="arrow-up"><i class="mdi mdi-arrow-up"></i> mdi-arrow-up</div>
<div class="icons__item" data-name="auto-fix"><i class="mdi mdi-auto-fix"></i> mdi-auto-fix</div>
<div class="icons__item" data-name="auto-upload"><i class="mdi mdi-auto-upload"></i> mdi-auto-upload</div>
<div class="icons__item" data-name="bank"><i class="mdi mdi-bank"></i> mdi-bank</div>
<div class="icons__item" data-name="barcode"><i class="mdi mdi-barcode"></i> mdi-barcode</div>
<div class="icons__item" data-name="basket"><i class="mdi mdi-basket"></i> mdi-basket</div>
<div class="icons__item" data-name="battery-20"><i class="mdi mdi-battery-20"></i> mdi-battery-20</div>
<div class="icons__item" data-name="battery-30"><i class="mdi mdi-battery-30"></i> mdi-battery-30</div>
<div class="icons__item" data-name="battery-40"><i class="mdi mdi-battery-40"></i> mdi-battery-40</div>
<div class="icons__item" data-name="battery-60"><i class="mdi mdi-battery-60"></i> mdi-battery-60</div>
<div class="icons__item" data-name="battery-80"><i class="mdi mdi-battery-80"></i> mdi-battery-80</div>
<div class="icons__item" data-name="battery-90"><i class="mdi mdi-battery-90"></i> mdi-battery-90</div>
<div class="icons__item" data-name="battery-alert"><i class="mdi mdi-battery-alert"></i> mdi-battery-alert</div>
<div class="icons__item" data-name="battery-charging-100"><i class="mdi mdi-battery-charging-100"></i> mdi-battery-charging-100</div>
<div class="icons__item" data-name="battery-charging-20"><i class="mdi mdi-battery-charging-20"></i> mdi-battery-charging-20</div>
<div class="icons__item" data-name="battery-charging-30"><i class="mdi mdi-battery-charging-30"></i> mdi-battery-charging-30</div>
<div class="icons__item" data-name="battery-charging-40"><i class="mdi mdi-battery-charging-40"></i> mdi-battery-charging-40</div>
<div class="icons__item" data-name="battery-charging-60"><i class="mdi mdi-battery-charging-60"></i> mdi-battery-charging-60</div>
<div class="icons__item" data-name="battery-charging-80"><i class="mdi mdi-battery-charging-80"></i> mdi-battery-charging-80</div>
<div class="icons__item" data-name="battery-charging-90"><i class="mdi mdi-battery-charging-90"></i> mdi-battery-charging-90</div>
<div class="icons__item" data-name="battery-minus"><i class="mdi mdi-battery-minus"></i> mdi-battery-minus</div>
<div class="icons__item" data-name="battery-negative"><i class="mdi mdi-battery-negative"></i> mdi-battery-negative</div>
<div class="icons__item" data-name="battery-outline"><i class="mdi mdi-battery-outline"></i> mdi-battery-outline</div>
<div class="icons__item" data-name="battery-plus"><i class="mdi mdi-battery-plus"></i> mdi-battery-plus</div>
<div class="icons__item" data-name="battery-positive"><i class="mdi mdi-battery-positive"></i> mdi-battery-positive</div>
<div class="icons__item" data-name="battery-unknown"><i class="mdi mdi-battery-unknown"></i> mdi-battery-unknown</div>
<div class="icons__item" data-name="battery"><i class="mdi mdi-battery"></i> mdi-battery</div>
<div class="icons__item" data-name="beaker-empty-outline"><i class="mdi mdi-beaker-empty-outline"></i> mdi-beaker-empty-outline</div>
<div class="icons__item" data-name="beaker-empty"><i class="mdi mdi-beaker-empty"></i> mdi-beaker-empty</div>
<div class="icons__item" data-name="beaker-outline"><i class="mdi mdi-beaker-outline"></i> mdi-beaker-outline</div>
<div class="icons__item" data-name="beaker"><i class="mdi mdi-beaker"></i> mdi-beaker</div>
<div class="icons__item" data-name="bell-off"><i class="mdi mdi-bell-off"></i> mdi-bell-off</div>
<div class="icons__item" data-name="bell-outline"><i class="mdi mdi-bell-outline"></i> mdi-bell-outline</div>
<div class="icons__item" data-name="bell-ring-outline"><i class="mdi mdi-bell-ring-outline"></i> mdi-bell-ring-outline</div>
<div class="icons__item" data-name="bell-ring"><i class="mdi mdi-bell-ring"></i> mdi-bell-ring</div>
<div class="icons__item" data-name="bell-sleep"><i class="mdi mdi-bell-sleep"></i> mdi-bell-sleep</div>
<div class="icons__item" data-name="bell"><i class="mdi mdi-bell"></i> mdi-bell</div>
<div class="icons__item" data-name="bike"><i class="mdi mdi-bike"></i> mdi-bike</div>
<div class="icons__item" data-name="block-helper"><i class="mdi mdi-block-helper"></i> mdi-block-helper</div>
<div class="icons__item" data-name="blogger"><i class="mdi mdi-blogger"></i> mdi-blogger</div>
<div class="icons__item" data-name="bluetooth-audio"><i class="mdi mdi-bluetooth-audio"></i> mdi-bluetooth-audio</div>
<div class="icons__item" data-name="bluetooth-connect"><i class="mdi mdi-bluetooth-connect"></i> mdi-bluetooth-connect</div>
<div class="icons__item" data-name="bluetooth"><i class="mdi mdi-bluetooth"></i> mdi-bluetooth</div>
<div class="icons__item" data-name="book"><i class="mdi mdi-book"></i> mdi-book</div>
<div class="icons__item" data-name="bookmark-outline"><i class="mdi mdi-bookmark-outline"></i> mdi-bookmark-outline</div>
<div class="icons__item" data-name="bookmark"><i class="mdi mdi-bookmark"></i> mdi-bookmark</div>
<div class="icons__item" data-name="border-all"><i class="mdi mdi-border-all"></i> mdi-border-all</div>
<div class="icons__item" data-name="border-bottom"><i class="mdi mdi-border-bottom"></i> mdi-border-bottom</div>
<div class="icons__item" data-name="border-color"><i class="mdi mdi-border-color"></i> mdi-border-color</div>
<div class="icons__item" data-name="border-horizontal"><i class="mdi mdi-border-horizontal"></i> mdi-border-horizontal</div>
<div class="icons__item" data-name="border-inside"><i class="mdi mdi-border-inside"></i> mdi-border-inside</div>
<div class="icons__item" data-name="border-left"><i class="mdi mdi-border-left"></i> mdi-border-left</div>
<div class="icons__item" data-name="border-none"><i class="mdi mdi-border-none"></i> mdi-border-none</div>
<div class="icons__item" data-name="border-outside"><i class="mdi mdi-border-outside"></i> mdi-border-outside</div>
<div class="icons__item" data-name="border-right"><i class="mdi mdi-border-right"></i> mdi-border-right</div>
<div class="icons__item" data-name="border-top"><i class="mdi mdi-border-top"></i> mdi-border-top</div>
<div class="icons__item" data-name="border-vertical"><i class="mdi mdi-border-vertical"></i> mdi-border-vertical</div>
<div class="icons__item" data-name="briefcase-checked"><i class="mdi mdi-briefcase-checked"></i> mdi-briefcase-checked</div>
<div class="icons__item" data-name="briefcase-download"><i class="mdi mdi-briefcase-download"></i> mdi-briefcase-download</div>
<div class="icons__item" data-name="briefcase-upload"><i class="mdi mdi-briefcase-upload"></i> mdi-briefcase-upload</div>
<div class="icons__item" data-name="briefcase"><i class="mdi mdi-briefcase"></i> mdi-briefcase</div>
<div class="icons__item" data-name="bus"><i class="mdi mdi-bus"></i> mdi-bus</div>
<div class="icons__item" data-name="cake-variant"><i class="mdi mdi-cake-variant"></i> mdi-cake-variant</div>
<div class="icons__item" data-name="cake"><i class="mdi mdi-cake"></i> mdi-cake</div>
<div class="icons__item" data-name="calendar-check"><i class="mdi mdi-calendar-check"></i> mdi-calendar-check</div>
<div class="icons__item" data-name="calendar-remove"><i class="mdi mdi-calendar-remove"></i> mdi-calendar-remove</div>
<div class="icons__item" data-name="calendar-text"><i class="mdi mdi-calendar-text"></i> mdi-calendar-text</div>
<div class="icons__item" data-name="calendar-today"><i class="mdi mdi-calendar-today"></i> mdi-calendar-today</div>
<div class="icons__item" data-name="calendar"><i class="mdi mdi-calendar"></i> mdi-calendar</div>
<div class="icons__item" data-name="camcorder-box-off"><i class="mdi mdi-camcorder-box-off"></i> mdi-camcorder-box-off</div>
<div class="icons__item" data-name="camcorder-box"><i class="mdi mdi-camcorder-box"></i> mdi-camcorder-box</div>
<div class="icons__item" data-name="camcorder-off"><i class="mdi mdi-camcorder-off"></i> mdi-camcorder-off</div>
<div class="icons__item" data-name="camcorder"><i class="mdi mdi-camcorder"></i> mdi-camcorder</div>
<div class="icons__item" data-name="camera-party-mode"><i class="mdi mdi-camera-party-mode"></i> mdi-camera-party-mode</div>
<div class="icons__item" data-name="camera-switch"><i class="mdi mdi-camera-switch"></i> mdi-camera-switch</div>
<div class="icons__item" data-name="camera-timer"><i class="mdi mdi-camera-timer"></i> mdi-camera-timer</div>
<div class="icons__item" data-name="camera-variant"><i class="mdi mdi-camera-variant"></i> mdi-camera-variant</div>
<div class="icons__item" data-name="camera"><i class="mdi mdi-camera"></i> mdi-camera</div>
<div class="icons__item" data-name="car-wash"><i class="mdi mdi-car-wash"></i> mdi-car-wash</div>
<div class="icons__item" data-name="car"><i class="mdi mdi-car"></i> mdi-car</div>
<div class="icons__item" data-name="cart-outline"><i class="mdi mdi-cart-outline"></i> mdi-cart-outline</div>
<div class="icons__item" data-name="cart"><i class="mdi mdi-cart"></i> mdi-cart</div>
<div class="icons__item" data-name="cash"><i class="mdi mdi-cash"></i> mdi-cash</div>
<div class="icons__item" data-name="cast-connected"><i class="mdi mdi-cast-connected"></i> mdi-cast-connected</div>
<div class="icons__item" data-name="cast"><i class="mdi mdi-cast"></i> mdi-cast</div>
<div class="icons__item" data-name="cellphone-android"><i class="mdi mdi-cellphone-android"></i> mdi-cellphone-android</div>
<div class="icons__item" data-name="cellphone-dock"><i class="mdi mdi-cellphone-dock"></i> mdi-cellphone-dock</div>
<div class="icons__item" data-name="cellphone-iphone"><i class="mdi mdi-cellphone-iphone"></i> mdi-cellphone-iphone</div>
<div class="icons__item" data-name="cellphone"><i class="mdi mdi-cellphone"></i> mdi-cellphone</div>
<div class="icons__item" data-name="check-all"><i class="mdi mdi-check-all"></i> mdi-check-all</div>
<div class="icons__item" data-name="check"><i class="mdi mdi-check"></i> mdi-check</div>
<div class="icons__item" data-name="checkbox-blank-circle-outline"><i class="mdi mdi-checkbox-blank-circle-outline"></i> mdi-checkbox-blank-circle-outline</div>
<div class="icons__item" data-name="checkbox-blank-circle"><i class="mdi mdi-checkbox-blank-circle"></i> mdi-checkbox-blank-circle</div>
<div class="icons__item" data-name="checkbox-blank-outline"><i class="mdi mdi-checkbox-blank-outline"></i> mdi-checkbox-blank-outline</div>
<div class="icons__item" data-name="checkbox-blank"><i class="mdi mdi-checkbox-blank"></i> mdi-checkbox-blank</div>
<div class="icons__item" data-name="checkbox-checked-outline"><i class="mdi mdi-checkbox-checked-outline"></i> mdi-checkbox-checked-outline</div>
<div class="icons__item" data-name="checkbox-checked"><i class="mdi mdi-checkbox-checked"></i> mdi-checkbox-checked</div>
<div class="icons__item" data-name="checkbox-marked-circle-outline"><i class="mdi mdi-checkbox-marked-circle-outline"></i> mdi-checkbox-marked-circle-outline</div>
<div class="icons__item" data-name="checkbox-marked-circle"><i class="mdi mdi-checkbox-marked-circle"></i> mdi-checkbox-marked-circle</div>
<div class="icons__item" data-name="checkbox-marked-outline"><i class="mdi mdi-checkbox-marked-outline"></i> mdi-checkbox-marked-outline</div>
<div class="icons__item" data-name="checkbox-marked"><i class="mdi mdi-checkbox-marked"></i> mdi-checkbox-marked</div>
<div class="icons__item" data-name="checkbox-outline"><i class="mdi mdi-checkbox-outline"></i> mdi-checkbox-outline</div>
<div class="icons__item" data-name="checkbox"><i class="mdi mdi-checkbox"></i> mdi-checkbox</div>
<div class="icons__item" data-name="chevron-down"><i class="mdi mdi-chevron-down"></i> mdi-chevron-down</div>
<div class="icons__item" data-name="chevron-left"><i class="mdi mdi-chevron-left"></i> mdi-chevron-left</div>
<div class="icons__item" data-name="chevron-right"><i class="mdi mdi-chevron-right"></i> mdi-chevron-right</div>
<div class="icons__item" data-name="chevron-up"><i class="mdi mdi-chevron-up"></i> mdi-chevron-up</div>
<div class="icons__item" data-name="city"><i class="mdi mdi-city"></i> mdi-city</div>
<div class="icons__item" data-name="clipboard-account"><i class="mdi mdi-clipboard-account"></i> mdi-clipboard-account</div>
<div class="icons__item" data-name="clipboard-alert"><i class="mdi mdi-clipboard-alert"></i> mdi-clipboard-alert</div>
<div class="icons__item" data-name="clipboard-arrow-down"><i class="mdi mdi-clipboard-arrow-down"></i> mdi-clipboard-arrow-down</div>
<div class="icons__item" data-name="clipboard-arrow-left"><i class="mdi mdi-clipboard-arrow-left"></i> mdi-clipboard-arrow-left</div>
<div class="icons__item" data-name="clipboard-check"><i class="mdi mdi-clipboard-check"></i> mdi-clipboard-check</div>
<div class="icons__item" data-name="clipboard-outline"><i class="mdi mdi-clipboard-outline"></i> mdi-clipboard-outline</div>
<div class="icons__item" data-name="clipboard-text"><i class="mdi mdi-clipboard-text"></i> mdi-clipboard-text</div>
<div class="icons__item" data-name="clipboard"><i class="mdi mdi-clipboard"></i> mdi-clipboard</div>
<div class="icons__item" data-name="clock"><i class="mdi mdi-clock"></i> mdi-clock</div>
<div class="icons__item" data-name="close-box-outline"><i class="mdi mdi-close-box-outline"></i> mdi-close-box-outline</div>
<div class="icons__item" data-name="close-box"><i class="mdi mdi-close-box"></i> mdi-close-box</div>
<div class="icons__item" data-name="close-circle-outline"><i class="mdi mdi-close-circle-outline"></i> mdi-close-circle-outline</div>
<div class="icons__item" data-name="close-circle"><i class="mdi mdi-close-circle"></i> mdi-close-circle</div>
<div class="icons__item" data-name="close"><i class="mdi mdi-close"></i> mdi-close</div>
<div class="icons__item" data-name="closed-caption"><i class="mdi mdi-closed-caption"></i> mdi-closed-caption</div>
<div class="icons__item" data-name="cloud-check"><i class="mdi mdi-cloud-check"></i> mdi-cloud-check</div>
<div class="icons__item" data-name="cloud-circle"><i class="mdi mdi-cloud-circle"></i> mdi-cloud-circle</div>
<div class="icons__item" data-name="cloud-download"><i class="mdi mdi-cloud-download"></i> mdi-cloud-download</div>
<div class="icons__item" data-name="cloud-outline-off"><i class="mdi mdi-cloud-outline-off"></i> mdi-cloud-outline-off</div>
<div class="icons__item" data-name="cloud-outline"><i class="mdi mdi-cloud-outline"></i> mdi-cloud-outline</div>
<div class="icons__item" data-name="cloud-upload"><i class="mdi mdi-cloud-upload"></i> mdi-cloud-upload</div>
<div class="icons__item" data-name="cloud"><i class="mdi mdi-cloud"></i> mdi-cloud</div>
<div class="icons__item" data-name="coffee"><i class="mdi mdi-coffee"></i> mdi-coffee</div>
<div class="icons__item" data-name="cog-box"><i class="mdi mdi-cog-box"></i> mdi-cog-box</div>
<div class="icons__item" data-name="cog"><i class="mdi mdi-cog"></i> mdi-cog</div>
<div class="icons__item" data-name="coin"><i class="mdi mdi-coin"></i> mdi-coin</div>
<div class="icons__item" data-name="color-helper"><i class="mdi mdi-color-helper"></i> mdi-color-helper</div>
<div class="icons__item" data-name="compare"><i class="mdi mdi-compare"></i> mdi-compare</div>
<div class="icons__item" data-name="compass"><i class="mdi mdi-compass"></i> mdi-compass</div>
<div class="icons__item" data-name="contrast-box"><i class="mdi mdi-contrast-box"></i> mdi-contrast-box</div>
<div class="icons__item" data-name="contrast-circle"><i class="mdi mdi-contrast-circle"></i> mdi-contrast-circle</div>
<div class="icons__item" data-name="contrast"><i class="mdi mdi-contrast"></i> mdi-contrast</div>
<div class="icons__item" data-name="credit-card"><i class="mdi mdi-credit-card"></i> mdi-credit-card</div>
<div class="icons__item" data-name="crop-free"><i class="mdi mdi-crop-free"></i> mdi-crop-free</div>
<div class="icons__item" data-name="crop-landscape"><i class="mdi mdi-crop-landscape"></i> mdi-crop-landscape</div>
<div class="icons__item" data-name="crop-portrait"><i class="mdi mdi-crop-portrait"></i> mdi-crop-portrait</div>
<div class="icons__item" data-name="crop-square"><i class="mdi mdi-crop-square"></i> mdi-crop-square</div>
<div class="icons__item" data-name="crop"><i class="mdi mdi-crop"></i> mdi-crop</div>
<div class="icons__item" data-name="crosshairs-gps"><i class="mdi mdi-crosshairs-gps"></i> mdi-crosshairs-gps</div>
<div class="icons__item" data-name="crosshairs"><i class="mdi mdi-crosshairs"></i> mdi-crosshairs</div>
<div class="icons__item" data-name="cup-water"><i class="mdi mdi-cup-water"></i> mdi-cup-water</div>
<div class="icons__item" data-name="cup"><i class="mdi mdi-cup"></i> mdi-cup</div>
<div class="icons__item" data-name="database-minus"><i class="mdi mdi-database-minus"></i> mdi-database-minus</div>
<div class="icons__item" data-name="database-outline"><i class="mdi mdi-database-outline"></i> mdi-database-outline</div>
<div class="icons__item" data-name="database-plus"><i class="mdi mdi-database-plus"></i> mdi-database-plus</div>
<div class="icons__item" data-name="database"><i class="mdi mdi-database"></i> mdi-database</div>
<div class="icons__item" data-name="debug-step-into"><i class="mdi mdi-debug-step-into"></i> mdi-debug-step-into</div>
<div class="icons__item" data-name="debug-step-out"><i class="mdi mdi-debug-step-out"></i> mdi-debug-step-out</div>
<div class="icons__item" data-name="debug-step-over"><i class="mdi mdi-debug-step-over"></i> mdi-debug-step-over</div>
<div class="icons__item" data-name="desktop-mac"><i class="mdi mdi-desktop-mac"></i> mdi-desktop-mac</div>
<div class="icons__item" data-name="directions"><i class="mdi mdi-directions"></i> mdi-directions</div>
<div class="icons__item" data-name="disk-alert"><i class="mdi mdi-disk-alert"></i> mdi-disk-alert</div>
<div class="icons__item" data-name="disqus"><i class="mdi mdi-disqus"></i> mdi-disqus</div>
<div class="icons__item" data-name="download"><i class="mdi mdi-download"></i> mdi-download</div>
<div class="icons__item" data-name="drawing-box"><i class="mdi mdi-drawing-box"></i> mdi-drawing-box</div>
<div class="icons__item" data-name="drawing"><i class="mdi mdi-drawing"></i> mdi-drawing</div>
<div class="icons__item" data-name="dribbble"><i class="mdi mdi-dribbble"></i> mdi-dribbble</div>
<div class="icons__item" data-name="earth"><i class="mdi mdi-earth"></i> mdi-earth</div>
<div class="icons__item" data-name="email-outline"><i class="mdi mdi-email-outline"></i> mdi-email-outline</div>
<div class="icons__item" data-name="email"><i class="mdi mdi-email"></i> mdi-email</div>
<div class="icons__item" data-name="emoticon-happy"><i class="mdi mdi-emoticon-happy"></i> mdi-emoticon-happy</div>
<div class="icons__item" data-name="emoticon-poop"><i class="mdi mdi-emoticon-poop"></i> mdi-emoticon-poop</div>
<div class="icons__item" data-name="emoticon-sad"><i class="mdi mdi-emoticon-sad"></i> mdi-emoticon-sad</div>
<div class="icons__item" data-name="emoticon"><i class="mdi mdi-emoticon"></i> mdi-emoticon</div>
<div class="icons__item" data-name="exit-to-app"><i class="mdi mdi-exit-to-app"></i> mdi-exit-to-app</div>
<div class="icons__item" data-name="eye-off"><i class="mdi mdi-eye-off"></i> mdi-eye-off</div>
<div class="icons__item" data-name="eye"><i class="mdi mdi-eye"></i> mdi-eye</div>
<div class="icons__item" data-name="facebook-box"><i class="mdi mdi-facebook-box"></i> mdi-facebook-box</div>
<div class="icons__item" data-name="facebook"><i class="mdi mdi-facebook"></i> mdi-facebook</div>
<div class="icons__item" data-name="fast-forward"><i class="mdi mdi-fast-forward"></i> mdi-fast-forward</div>
<div class="icons__item" data-name="ferry"><i class="mdi mdi-ferry"></i> mdi-ferry</div>
<div class="icons__item" data-name="file-cloud"><i class="mdi mdi-file-cloud"></i> mdi-file-cloud</div>
<div class="icons__item" data-name="file-delimited"><i class="mdi mdi-file-delimited"></i> mdi-file-delimited</div>
<div class="icons__item" data-name="file-document-box"><i class="mdi mdi-file-document-box"></i> mdi-file-document-box</div>
<div class="icons__item" data-name="file-document"><i class="mdi mdi-file-document"></i> mdi-file-document</div>
<div class="icons__item" data-name="file-excel-box"><i class="mdi mdi-file-excel-box"></i> mdi-file-excel-box</div>
<div class="icons__item" data-name="file-excel"><i class="mdi mdi-file-excel"></i> mdi-file-excel</div>
<div class="icons__item" data-name="file-image-box"><i class="mdi mdi-file-image-box"></i> mdi-file-image-box</div>
<div class="icons__item" data-name="file-image"><i class="mdi mdi-file-image"></i> mdi-file-image</div>
<div class="icons__item" data-name="file-pdf-box"><i class="mdi mdi-file-pdf-box"></i> mdi-file-pdf-box</div>
<div class="icons__item" data-name="file-pdf"><i class="mdi mdi-file-pdf"></i> mdi-file-pdf</div>
<div class="icons__item" data-name="file-powerpoint-box"><i class="mdi mdi-file-powerpoint-box"></i> mdi-file-powerpoint-box</div>
<div class="icons__item" data-name="file-powerpoint"><i class="mdi mdi-file-powerpoint"></i> mdi-file-powerpoint</div>
<div class="icons__item" data-name="file-presentation-box"><i class="mdi mdi-file-presentation-box"></i> mdi-file-presentation-box</div>
<div class="icons__item" data-name="file-word-box"><i class="mdi mdi-file-word-box"></i> mdi-file-word-box</div>
<div class="icons__item" data-name="file-word"><i class="mdi mdi-file-word"></i> mdi-file-word</div>
<div class="icons__item" data-name="file"><i class="mdi mdi-file"></i> mdi-file</div>
<div class="icons__item" data-name="film"><i class="mdi mdi-film"></i> mdi-film</div>
<div class="icons__item" data-name="filmstrip"><i class="mdi mdi-filmstrip"></i> mdi-filmstrip</div>
<div class="icons__item" data-name="filter-outline"><i class="mdi mdi-filter-outline"></i> mdi-filter-outline</div>
<div class="icons__item" data-name="filter-remove-outline"><i class="mdi mdi-filter-remove-outline"></i> mdi-filter-remove-outline</div>
<div class="icons__item" data-name="filter-remove"><i class="mdi mdi-filter-remove"></i> mdi-filter-remove</div>
<div class="icons__item" data-name="filter"><i class="mdi mdi-filter"></i> mdi-filter</div>
<div class="icons__item" data-name="fire"><i class="mdi mdi-fire"></i> mdi-fire</div>
<div class="icons__item" data-name="fish"><i class="mdi mdi-fish"></i> mdi-fish</div>
<div class="icons__item" data-name="flag"><i class="mdi mdi-flag"></i> mdi-flag</div>
<div class="icons__item" data-name="flip-to-back"><i class="mdi mdi-flip-to-back"></i> mdi-flip-to-back</div>
<div class="icons__item" data-name="flip-to-front"><i class="mdi mdi-flip-to-front"></i> mdi-flip-to-front</div>
<div class="icons__item" data-name="flower"><i class="mdi mdi-flower"></i> mdi-flower</div>
<div class="icons__item" data-name="folder-account"><i class="mdi mdi-folder-account"></i> mdi-folder-account</div>
<div class="icons__item" data-name="folder-google-drive"><i class="mdi mdi-folder-google-drive"></i> mdi-folder-google-drive</div>
<div class="icons__item" data-name="folder-move"><i class="mdi mdi-folder-move"></i> mdi-folder-move</div>
<div class="icons__item" data-name="folder-outline"><i class="mdi mdi-folder-outline"></i> mdi-folder-outline</div>
<div class="icons__item" data-name="folder"><i class="mdi mdi-folder"></i> mdi-folder</div>
<div class="icons__item" data-name="format-align-center"><i class="mdi mdi-format-align-center"></i> mdi-format-align-center</div>
<div class="icons__item" data-name="format-align-justify"><i class="mdi mdi-format-align-justify"></i> mdi-format-align-justify</div>
<div class="icons__item" data-name="format-align-left"><i class="mdi mdi-format-align-left"></i> mdi-format-align-left</div>
<div class="icons__item" data-name="format-align-right"><i class="mdi mdi-format-align-right"></i> mdi-format-align-right</div>
<div class="icons__item" data-name="format-bold"><i class="mdi mdi-format-bold"></i> mdi-format-bold</div>
<div class="icons__item" data-name="format-color-fill"><i class="mdi mdi-format-color-fill"></i> mdi-format-color-fill</div>
<div class="icons__item" data-name="format-line-spacing"><i class="mdi mdi-format-line-spacing"></i> mdi-format-line-spacing</div>
<div class="icons__item" data-name="format-list-numbers"><i class="mdi mdi-format-list-numbers"></i> mdi-format-list-numbers</div>
<div class="icons__item" data-name="format-paint"><i class="mdi mdi-format-paint"></i> mdi-format-paint</div>
<div class="icons__item" data-name="format-strikethrough"><i class="mdi mdi-format-strikethrough"></i> mdi-format-strikethrough</div>
<div class="icons__item" data-name="format-subscript"><i class="mdi mdi-format-subscript"></i> mdi-format-subscript</div>
<div class="icons__item" data-name="format-superscript"><i class="mdi mdi-format-superscript"></i> mdi-format-superscript</div>
<div class="icons__item" data-name="format-underline"><i class="mdi mdi-format-underline"></i> mdi-format-underline</div>
<div class="icons__item" data-name="gamepad"><i class="mdi mdi-gamepad"></i> mdi-gamepad</div>
<div class="icons__item" data-name="gas-station"><i class="mdi mdi-gas-station"></i> mdi-gas-station</div>
<div class="icons__item" data-name="gift-variant"><i class="mdi mdi-gift-variant"></i> mdi-gift-variant</div>
<div class="icons__item" data-name="gift"><i class="mdi mdi-gift"></i> mdi-gift</div>
<div class="icons__item" data-name="github-box"><i class="mdi mdi-github-box"></i> mdi-github-box</div>
<div class="icons__item" data-name="github-circle"><i class="mdi mdi-github-circle"></i> mdi-github-circle</div>
<div class="icons__item" data-name="gmail"><i class="mdi mdi-gmail"></i> mdi-gmail</div>
<div class="icons__item" data-name="google-chrome"><i class="mdi mdi-google-chrome"></i> mdi-google-chrome</div>
<div class="icons__item" data-name="google-circles-communities"><i class="mdi mdi-google-circles-communities"></i> mdi-google-circles-communities</div>
<div class="icons__item" data-name="google-circles-extended"><i class="mdi mdi-google-circles-extended"></i> mdi-google-circles-extended</div>
<div class="icons__item" data-name="google-circles"><i class="mdi mdi-google-circles"></i> mdi-google-circles</div>
<div class="icons__item" data-name="google-drive"><i class="mdi mdi-google-drive"></i> mdi-google-drive</div>
<div class="icons__item" data-name="google-earth"><i class="mdi mdi-google-earth"></i> mdi-google-earth</div>
<div class="icons__item" data-name="google-glass"><i class="mdi mdi-google-glass"></i> mdi-google-glass</div>
<div class="icons__item" data-name="google-pages"><i class="mdi mdi-google-pages"></i> mdi-google-pages</div>
<div class="icons__item" data-name="google-plus-box"><i class="mdi mdi-google-plus-box"></i> mdi-google-plus-box</div>
<div class="icons__item" data-name="google-plus"><i class="mdi mdi-google-plus"></i> mdi-google-plus</div>
<div class="icons__item" data-name="google"><i class="mdi mdi-google"></i> mdi-google</div>
<div class="icons__item" data-name="hangouts"><i class="mdi mdi-hangouts"></i> mdi-hangouts</div>
<div class="icons__item" data-name="headphones-box"><i class="mdi mdi-headphones-box"></i> mdi-headphones-box</div>
<div class="icons__item" data-name="headphones"><i class="mdi mdi-headphones"></i> mdi-headphones</div>
<div class="icons__item" data-name="headset"><i class="mdi mdi-headset"></i> mdi-headset</div>
<div class="icons__item" data-name="heart-box"><i class="mdi mdi-heart-box"></i> mdi-heart-box</div>
<div class="icons__item" data-name="heart-outline"><i class="mdi mdi-heart-outline"></i> mdi-heart-outline</div>
<div class="icons__item" data-name="heart"><i class="mdi mdi-heart"></i> mdi-heart</div>
<div class="icons__item" data-name="help-circle"><i class="mdi mdi-help-circle"></i> mdi-help-circle</div>
<div class="icons__item" data-name="help"><i class="mdi mdi-help"></i> mdi-help</div>
<div class="icons__item" data-name="history"><i class="mdi mdi-history"></i> mdi-history</div>
<div class="icons__item" data-name="home"><i class="mdi mdi-home"></i> mdi-home</div>
<div class="icons__item" data-name="hospital-building"><i class="mdi mdi-hospital-building"></i> mdi-hospital-building</div>
<div class="icons__item" data-name="hospital-marker"><i class="mdi mdi-hospital-marker"></i> mdi-hospital-marker</div>
<div class="icons__item" data-name="hospital"><i class="mdi mdi-hospital"></i> mdi-hospital</div>
<div class="icons__item" data-name="hotel"><i class="mdi mdi-hotel"></i> mdi-hotel</div>
<div class="icons__item" data-name="houzz-box"><i class="mdi mdi-houzz-box"></i> mdi-houzz-box</div>
<div class="icons__item" data-name="houzz"><i class="mdi mdi-houzz"></i> mdi-houzz</div>
<div class="icons__item" data-name="human"><i class="mdi mdi-human"></i> mdi-human</div>
<div class="icons__item" data-name="information-outline"><i class="mdi mdi-information-outline"></i> mdi-information-outline</div>
<div class="icons__item" data-name="information"><i class="mdi mdi-information"></i> mdi-information</div>
<div class="icons__item" data-name="instagram"><i class="mdi mdi-instagram"></i> mdi-instagram</div>
<div class="icons__item" data-name="instapaper"><i class="mdi mdi-instapaper"></i> mdi-instapaper</div>
<div class="icons__item" data-name="invert-colors"><i class="mdi mdi-invert-colors"></i> mdi-invert-colors</div>
<div class="icons__item" data-name="keyboard-backspace"><i class="mdi mdi-keyboard-backspace"></i> mdi-keyboard-backspace</div>
<div class="icons__item" data-name="keyboard-caps"><i class="mdi mdi-keyboard-caps"></i> mdi-keyboard-caps</div>
<div class="icons__item" data-name="keyboard-close"><i class="mdi mdi-keyboard-close"></i> mdi-keyboard-close</div>
<div class="icons__item" data-name="keyboard-return"><i class="mdi mdi-keyboard-return"></i> mdi-keyboard-return</div>
<div class="icons__item" data-name="keyboard-tab"><i class="mdi mdi-keyboard-tab"></i> mdi-keyboard-tab</div>
<div class="icons__item" data-name="keyboard"><i class="mdi mdi-keyboard"></i> mdi-keyboard</div>
<div class="icons__item" data-name="label-outline"><i class="mdi mdi-label-outline"></i> mdi-label-outline</div>
<div class="icons__item" data-name="label"><i class="mdi mdi-label"></i> mdi-label</div>
<div class="icons__item" data-name="laptop-chromebook"><i class="mdi mdi-laptop-chromebook"></i> mdi-laptop-chromebook</div>
<div class="icons__item" data-name="laptop-mac"><i class="mdi mdi-laptop-mac"></i> mdi-laptop-mac</div>
<div class="icons__item" data-name="laptop-windows"><i class="mdi mdi-laptop-windows"></i> mdi-laptop-windows</div>
<div class="icons__item" data-name="laptop"><i class="mdi mdi-laptop"></i> mdi-laptop</div>
<div class="icons__item" data-name="launch"><i class="mdi mdi-launch"></i> mdi-launch</div>
<div class="icons__item" data-name="library"><i class="mdi mdi-library"></i> mdi-library</div>
<div class="icons__item" data-name="lightbulb"><i class="mdi mdi-lightbulb"></i> mdi-lightbulb</div>
<div class="icons__item" data-name="link"><i class="mdi mdi-link"></i> mdi-link</div>
<div class="icons__item" data-name="linkedin"><i class="mdi mdi-linkedin"></i> mdi-linkedin</div>
<div class="icons__item" data-name="lock-outline"><i class="mdi mdi-lock-outline"></i> mdi-lock-outline</div>
<div class="icons__item" data-name="lock-unlock-outline"><i class="mdi mdi-lock-unlock-outline"></i> mdi-lock-unlock-outline</div>
<div class="icons__item" data-name="lock-unlock"><i class="mdi mdi-lock-unlock"></i> mdi-lock-unlock</div>
<div class="icons__item" data-name="lock"><i class="mdi mdi-lock"></i> mdi-lock</div>
<div class="icons__item" data-name="login"><i class="mdi mdi-login"></i> mdi-login</div>
<div class="icons__item" data-name="magnify-minus"><i class="mdi mdi-magnify-minus"></i> mdi-magnify-minus</div>
<div class="icons__item" data-name="magnify-plus"><i class="mdi mdi-magnify-plus"></i> mdi-magnify-plus</div>
<div class="icons__item" data-name="magnify"><i class="mdi mdi-magnify"></i> mdi-magnify</div>
<div class="icons__item" data-name="map-marker-circle"><i class="mdi mdi-map-marker-circle"></i> mdi-map-marker-circle</div>
<div class="icons__item" data-name="map-marker-off"><i class="mdi mdi-map-marker-off"></i> mdi-map-marker-off</div>
<div class="icons__item" data-name="map-marker"><i class="mdi mdi-map-marker"></i> mdi-map-marker</div>
<div class="icons__item" data-name="map"><i class="mdi mdi-map"></i> mdi-map</div>
<div class="icons__item" data-name="marker-check"><i class="mdi mdi-marker-check"></i> mdi-marker-check</div>
<div class="icons__item" data-name="martini"><i class="mdi mdi-martini"></i> mdi-martini</div>
<div class="icons__item" data-name="memory"><i class="mdi mdi-memory"></i> mdi-memory</div>
<div class="icons__item" data-name="menu-down"><i class="mdi mdi-menu-down"></i> mdi-menu-down</div>
<div class="icons__item" data-name="menu-up"><i class="mdi mdi-menu-up"></i> mdi-menu-up</div>
<div class="icons__item" data-name="menu"><i class="mdi mdi-menu"></i> mdi-menu</div>
<div class="icons__item" data-name="message-alert"><i class="mdi mdi-message-alert"></i> mdi-message-alert</div>
<div class="icons__item" data-name="message-draw"><i class="mdi mdi-message-draw"></i> mdi-message-draw</div>
<div class="icons__item" data-name="message-image"><i class="mdi mdi-message-image"></i> mdi-message-image</div>
<div class="icons__item" data-name="message-processing"><i class="mdi mdi-message-processing"></i> mdi-message-processing</div>
<div class="icons__item" data-name="message-reply"><i class="mdi mdi-message-reply"></i> mdi-message-reply</div>
<div class="icons__item" data-name="message-video"><i class="mdi mdi-message-video"></i> mdi-message-video</div>
<div class="icons__item" data-name="microphone-dots"><i class="mdi mdi-microphone-dots"></i> mdi-microphone-dots</div>
<div class="icons__item" data-name="microphone-off"><i class="mdi mdi-microphone-off"></i> mdi-microphone-off</div>
<div class="icons__item" data-name="microphone-outline"><i class="mdi mdi-microphone-outline"></i> mdi-microphone-outline</div>
<div class="icons__item" data-name="microphone"><i class="mdi mdi-microphone"></i> mdi-microphone</div>
<div class="icons__item" data-name="minus-box"><i class="mdi mdi-minus-box"></i> mdi-minus-box</div>
<div class="icons__item" data-name="minus-circle-outline"><i class="mdi mdi-minus-circle-outline"></i> mdi-minus-circle-outline</div>
<div class="icons__item" data-name="minus-circle"><i class="mdi mdi-minus-circle"></i> mdi-minus-circle</div>
<div class="icons__item" data-name="minus"><i class="mdi mdi-minus"></i> mdi-minus</div>
<div class="icons__item" data-name="monitor"><i class="mdi mdi-monitor"></i> mdi-monitor</div>
<div class="icons__item" data-name="more"><i class="mdi mdi-more"></i> mdi-more</div>
<div class="icons__item" data-name="mouse"><i class="mdi mdi-mouse"></i> mdi-mouse</div>
<div class="icons__item" data-name="navigation"><i class="mdi mdi-navigation"></i> mdi-navigation</div>
<div class="icons__item" data-name="needle"><i class="mdi mdi-needle"></i> mdi-needle</div>
<div class="icons__item" data-name="nest-protect"><i class="mdi mdi-nest-protect"></i> mdi-nest-protect</div>
<div class="icons__item" data-name="nest-thermostat"><i class="mdi mdi-nest-thermostat"></i> mdi-nest-thermostat</div>
<div class="icons__item" data-name="newspaper"><i class="mdi mdi-newspaper"></i> mdi-newspaper</div>
<div class="icons__item" data-name="nfc-variant"><i class="mdi mdi-nfc-variant"></i> mdi-nfc-variant</div>
<div class="icons__item" data-name="nfc"><i class="mdi mdi-nfc"></i> mdi-nfc</div>
<div class="icons__item" data-name="oil"><i class="mdi mdi-oil"></i> mdi-oil</div>
<div class="icons__item" data-name="ornament-variant"><i class="mdi mdi-ornament-variant"></i> mdi-ornament-variant</div>
<div class="icons__item" data-name="ornament"><i class="mdi mdi-ornament"></i> mdi-ornament</div>
<div class="icons__item" data-name="parking"><i class="mdi mdi-parking"></i> mdi-parking</div>
<div class="icons__item" data-name="pause-circle-outline"><i class="mdi mdi-pause-circle-outline"></i> mdi-pause-circle-outline</div>
<div class="icons__item" data-name="pause-circle"><i class="mdi mdi-pause-circle"></i> mdi-pause-circle</div>
<div class="icons__item" data-name="pause-octagon-outline"><i class="mdi mdi-pause-octagon-outline"></i> mdi-pause-octagon-outline</div>
<div class="icons__item" data-name="pause-octagon"><i class="mdi mdi-pause-octagon"></i> mdi-pause-octagon</div>
<div class="icons__item" data-name="pause"><i class="mdi mdi-pause"></i> mdi-pause</div>
<div class="icons__item" data-name="pencil"><i class="mdi mdi-pencil"></i> mdi-pencil</div>
<div class="icons__item" data-name="pharmacy"><i class="mdi mdi-pharmacy"></i> mdi-pharmacy</div>
<div class="icons__item" data-name="phone-bluetooth"><i class="mdi mdi-phone-bluetooth"></i> mdi-phone-bluetooth</div>
<div class="icons__item" data-name="phone-dots"><i class="mdi mdi-phone-dots"></i> mdi-phone-dots</div>
<div class="icons__item" data-name="phone-forward"><i class="mdi mdi-phone-forward"></i> mdi-phone-forward</div>
<div class="icons__item" data-name="phone-hangup"><i class="mdi mdi-phone-hangup"></i> mdi-phone-hangup</div>
<div class="icons__item" data-name="phone-in-talk"><i class="mdi mdi-phone-in-talk"></i> mdi-phone-in-talk</div>
<div class="icons__item" data-name="phone-locked"><i class="mdi mdi-phone-locked"></i> mdi-phone-locked</div>
<div class="icons__item" data-name="phone-missed"><i class="mdi mdi-phone-missed"></i> mdi-phone-missed</div>
<div class="icons__item" data-name="phone-paused"><i class="mdi mdi-phone-paused"></i> mdi-phone-paused</div>
<div class="icons__item" data-name="phone"><i class="mdi mdi-phone"></i> mdi-phone</div>
<div class="icons__item" data-name="pill"><i class="mdi mdi-pill"></i> mdi-pill</div>
<div class="icons__item" data-name="pin"><i class="mdi mdi-pin"></i> mdi-pin</div>
<div class="icons__item" data-name="pine-tree-box"><i class="mdi mdi-pine-tree-box"></i> mdi-pine-tree-box</div>
<div class="icons__item" data-name="pine-tree"><i class="mdi mdi-pine-tree"></i> mdi-pine-tree</div>
<div class="icons__item" data-name="pinterest"><i class="mdi mdi-pinterest"></i> mdi-pinterest</div>
<div class="icons__item" data-name="pizza"><i class="mdi mdi-pizza"></i> mdi-pizza</div>
<div class="icons__item" data-name="play-box-outline"><i class="mdi mdi-play-box-outline"></i> mdi-play-box-outline</div>
<div class="icons__item" data-name="play-circle-outline"><i class="mdi mdi-play-circle-outline"></i> mdi-play-circle-outline</div>
<div class="icons__item" data-name="play-circle"><i class="mdi mdi-play-circle"></i> mdi-play-circle</div>
<div class="icons__item" data-name="play"><i class="mdi mdi-play"></i> mdi-play</div>
<div class="icons__item" data-name="plus-box"><i class="mdi mdi-plus-box"></i> mdi-plus-box</div>
<div class="icons__item" data-name="plus-circle-outline"><i class="mdi mdi-plus-circle-outline"></i> mdi-plus-circle-outline</div>
<div class="icons__item" data-name="plus-circle"><i class="mdi mdi-plus-circle"></i> mdi-plus-circle</div>
<div class="icons__item" data-name="plus-one"><i class="mdi mdi-plus-one"></i> mdi-plus-one</div>
<div class="icons__item" data-name="plus"><i class="mdi mdi-plus"></i> mdi-plus</div>
<div class="icons__item" data-name="pocket"><i class="mdi mdi-pocket"></i> mdi-pocket</div>
<div class="icons__item" data-name="poll-box"><i class="mdi mdi-poll-box"></i> mdi-poll-box</div>
<div class="icons__item" data-name="poll"><i class="mdi mdi-poll"></i> mdi-poll</div>
<div class="icons__item" data-name="polymer"><i class="mdi mdi-polymer"></i> mdi-polymer</div>
<div class="icons__item" data-name="printer"><i class="mdi mdi-printer"></i> mdi-printer</div>
<div class="icons__item" data-name="puzzle"><i class="mdi mdi-puzzle"></i> mdi-puzzle</div>
<div class="icons__item" data-name="qrcode"><i class="mdi mdi-qrcode"></i> mdi-qrcode</div>
<div class="icons__item" data-name="quality-high"><i class="mdi mdi-quality-high"></i> mdi-quality-high</div>
<div class="icons__item" data-name="radiobox-blank"><i class="mdi mdi-radiobox-blank"></i> mdi-radiobox-blank</div>
<div class="icons__item" data-name="radiobox-marked"><i class="mdi mdi-radiobox-marked"></i> mdi-radiobox-marked</div>
<div class="icons__item" data-name="readability"><i class="mdi mdi-readability"></i> mdi-readability</div>
<div class="icons__item" data-name="receipt"><i class="mdi mdi-receipt"></i> mdi-receipt</div>
<div class="icons__item" data-name="recycle"><i class="mdi mdi-recycle"></i> mdi-recycle</div>
<div class="icons__item" data-name="refresh"><i class="mdi mdi-refresh"></i> mdi-refresh</div>
<div class="icons__item" data-name="relative-scale"><i class="mdi mdi-relative-scale"></i> mdi-relative-scale</div>
<div class="icons__item" data-name="rename-box"><i class="mdi mdi-rename-box"></i> mdi-rename-box</div>
<div class="icons__item" data-name="rewind"><i class="mdi mdi-rewind"></i> mdi-rewind</div>
<div class="icons__item" data-name="ribbon"><i class="mdi mdi-ribbon"></i> mdi-ribbon</div>
<div class="icons__item" data-name="rotate-left-variant"><i class="mdi mdi-rotate-left-variant"></i> mdi-rotate-left-variant</div>
<div class="icons__item" data-name="rotate-left"><i class="mdi mdi-rotate-left"></i> mdi-rotate-left</div>
<div class="icons__item" data-name="rotate-right-variant"><i class="mdi mdi-rotate-right-variant"></i> mdi-rotate-right-variant</div>
<div class="icons__item" data-name="rotate-right"><i class="mdi mdi-rotate-right"></i> mdi-rotate-right</div>
<div class="icons__item" data-name="rss-box"><i class="mdi mdi-rss-box"></i> mdi-rss-box</div>
<div class="icons__item" data-name="rss"><i class="mdi mdi-rss"></i> mdi-rss</div>
<div class="icons__item" data-name="satellite"><i class="mdi mdi-satellite"></i> mdi-satellite</div>
<div class="icons__item" data-name="school"><i class="mdi mdi-school"></i> mdi-school</div>
<div class="icons__item" data-name="script"><i class="mdi mdi-script"></i> mdi-script</div>
<div class="icons__item" data-name="security"><i class="mdi mdi-security"></i> mdi-security</div>
<div class="icons__item" data-name="server-network-off"><i class="mdi mdi-server-network-off"></i> mdi-server-network-off</div>
<div class="icons__item" data-name="server-network"><i class="mdi mdi-server-network"></i> mdi-server-network</div>
<div class="icons__item" data-name="server-off"><i class="mdi mdi-server-off"></i> mdi-server-off</div>
<div class="icons__item" data-name="server"><i class="mdi mdi-server"></i> mdi-server</div>
<div class="icons__item" data-name="shape-plus"><i class="mdi mdi-shape-plus"></i> mdi-shape-plus</div>
<div class="icons__item" data-name="share-variant"><i class="mdi mdi-share-variant"></i> mdi-share-variant</div>
<div class="icons__item" data-name="share"><i class="mdi mdi-share"></i> mdi-share</div>
<div class="icons__item" data-name="shopping"><i class="mdi mdi-shopping"></i> mdi-shopping</div>
<div class="icons__item" data-name="silverware"><i class="mdi mdi-silverware"></i> mdi-silverware</div>
<div class="icons__item" data-name="sim-alert"><i class="mdi mdi-sim-alert"></i> mdi-sim-alert</div>
<div class="icons__item" data-name="sim"><i class="mdi mdi-sim"></i> mdi-sim</div>
<div class="icons__item" data-name="skip-next"><i class="mdi mdi-skip-next"></i> mdi-skip-next</div>
<div class="icons__item" data-name="skip-previous"><i class="mdi mdi-skip-previous"></i> mdi-skip-previous</div>
<div class="icons__item" data-name="speaker-off"><i class="mdi mdi-speaker-off"></i> mdi-speaker-off</div>
<div class="icons__item" data-name="speaker"><i class="mdi mdi-speaker"></i> mdi-speaker</div>
<div class="icons__item" data-name="star-half"><i class="mdi mdi-star-half"></i> mdi-star-half</div>
<div class="icons__item" data-name="star-outline"><i class="mdi mdi-star-outline"></i> mdi-star-outline</div>
<div class="icons__item" data-name="star"><i class="mdi mdi-star"></i> mdi-star</div>
<div class="icons__item" data-name="stocking"><i class="mdi mdi-stocking"></i> mdi-stocking</div>
<div class="icons__item" data-name="stop"><i class="mdi mdi-stop"></i> mdi-stop</div>
<div class="icons__item" data-name="store-24-hour"><i class="mdi mdi-store-24-hour"></i> mdi-store-24-hour</div>
<div class="icons__item" data-name="store"><i class="mdi mdi-store"></i> mdi-store</div>
<div class="icons__item" data-name="subway"><i class="mdi mdi-subway"></i> mdi-subway</div>
<div class="icons__item" data-name="swap-horizontal"><i class="mdi mdi-swap-horizontal"></i> mdi-swap-horizontal</div>
<div class="icons__item" data-name="swap-vertical"><i class="mdi mdi-swap-vertical"></i> mdi-swap-vertical</div>
<div class="icons__item" data-name="sync-alert"><i class="mdi mdi-sync-alert"></i> mdi-sync-alert</div>
<div class="icons__item" data-name="sync-off"><i class="mdi mdi-sync-off"></i> mdi-sync-off</div>
<div class="icons__item" data-name="sync"><i class="mdi mdi-sync"></i> mdi-sync</div>
<div class="icons__item" data-name="tab-unselected"><i class="mdi mdi-tab-unselected"></i> mdi-tab-unselected</div>
<div class="icons__item" data-name="tab"><i class="mdi mdi-tab"></i> mdi-tab</div>
<div class="icons__item" data-name="tablet-android"><i class="mdi mdi-tablet-android"></i> mdi-tablet-android</div>
<div class="icons__item" data-name="tablet-ipad"><i class="mdi mdi-tablet-ipad"></i> mdi-tablet-ipad</div>
<div class="icons__item" data-name="tablet"><i class="mdi mdi-tablet"></i> mdi-tablet</div>
<div class="icons__item" data-name="tag-faces"><i class="mdi mdi-tag-faces"></i> mdi-tag-faces</div>
<div class="icons__item" data-name="tag"><i class="mdi mdi-tag"></i> mdi-tag</div>
<div class="icons__item" data-name="taxi"><i class="mdi mdi-taxi"></i> mdi-taxi</div>
<div class="icons__item" data-name="television"><i class="mdi mdi-television"></i> mdi-television</div>
<div class="icons__item" data-name="terrain"><i class="mdi mdi-terrain"></i> mdi-terrain</div>
<div class="icons__item" data-name="thumb-down"><i class="mdi mdi-thumb-down"></i> mdi-thumb-down</div>
<div class="icons__item" data-name="thumb-up"><i class="mdi mdi-thumb-up"></i> mdi-thumb-up</div>
<div class="icons__item" data-name="ticket"><i class="mdi mdi-ticket"></i> mdi-ticket</div>
<div class="icons__item" data-name="tie"><i class="mdi mdi-tie"></i> mdi-tie</div>
<div class="icons__item" data-name="timelapse"><i class="mdi mdi-timelapse"></i> mdi-timelapse</div>
<div class="icons__item" data-name="toggle-switch-off"><i class="mdi mdi-toggle-switch-off"></i> mdi-toggle-switch-off</div>
<div class="icons__item" data-name="toggle-switch"><i class="mdi mdi-toggle-switch"></i> mdi-toggle-switch</div>
<div class="icons__item" data-name="tooltip-edit"><i class="mdi mdi-tooltip-edit"></i> mdi-tooltip-edit</div>
<div class="icons__item" data-name="tooltip-image"><i class="mdi mdi-tooltip-image"></i> mdi-tooltip-image</div>
<div class="icons__item" data-name="tooltip-outline"><i class="mdi mdi-tooltip-outline"></i> mdi-tooltip-outline</div>
<div class="icons__item" data-name="tooltip-text"><i class="mdi mdi-tooltip-text"></i> mdi-tooltip-text</div>
<div class="icons__item" data-name="tooltip"><i class="mdi mdi-tooltip"></i> mdi-tooltip</div>
<div class="icons__item" data-name="traffic-light"><i class="mdi mdi-traffic-light"></i> mdi-traffic-light</div>
<div class="icons__item" data-name="train"><i class="mdi mdi-train"></i> mdi-train</div>
<div class="icons__item" data-name="tram"><i class="mdi mdi-tram"></i> mdi-tram</div>
<div class="icons__item" data-name="trophy-award"><i class="mdi mdi-trophy-award"></i> mdi-trophy-award</div>
<div class="icons__item" data-name="trophy-variant"><i class="mdi mdi-trophy-variant"></i> mdi-trophy-variant</div>
<div class="icons__item" data-name="trophy"><i class="mdi mdi-trophy"></i> mdi-trophy</div>
<div class="icons__item" data-name="truck"><i class="mdi mdi-truck"></i> mdi-truck</div>
<div class="icons__item" data-name="tshirt-crew"><i class="mdi mdi-tshirt-crew"></i> mdi-tshirt-crew</div>
<div class="icons__item" data-name="tshirt-v"><i class="mdi mdi-tshirt-v"></i> mdi-tshirt-v</div>
<div class="icons__item" data-name="tumblr"><i class="mdi mdi-tumblr"></i> mdi-tumblr</div>
<div class="icons__item" data-name="twitch"><i class="mdi mdi-twitch"></i> mdi-twitch</div>
<div class="icons__item" data-name="twitter-box"><i class="mdi mdi-twitter-box"></i> mdi-twitter-box</div>
<div class="icons__item" data-name="twitter"><i class="mdi mdi-twitter"></i> mdi-twitter</div>
<div class="icons__item" data-name="unfold-less"><i class="mdi mdi-unfold-less"></i> mdi-unfold-less</div>
<div class="icons__item" data-name="unfold-more"><i class="mdi mdi-unfold-more"></i> mdi-unfold-more</div>
<div class="icons__item" data-name="upload"><i class="mdi mdi-upload"></i> mdi-upload</div>
<div class="icons__item" data-name="usb"><i class="mdi mdi-usb"></i> mdi-usb</div>
<div class="icons__item" data-name="vector-square"><i class="mdi mdi-vector-square"></i> mdi-vector-square</div>
<div class="icons__item" data-name="vibration"><i class="mdi mdi-vibration"></i> mdi-vibration</div>
<div class="icons__item" data-name="video-off"><i class="mdi mdi-video-off"></i> mdi-video-off</div>
<div class="icons__item" data-name="video-switch"><i class="mdi mdi-video-switch"></i> mdi-video-switch</div>
<div class="icons__item" data-name="video"><i class="mdi mdi-video"></i> mdi-video</div>
<div class="icons__item" data-name="voicemail"><i class="mdi mdi-voicemail"></i> mdi-voicemail</div>
<div class="icons__item" data-name="volume-high"><i class="mdi mdi-volume-high"></i> mdi-volume-high</div>
<div class="icons__item" data-name="volume-low"><i class="mdi mdi-volume-low"></i> mdi-volume-low</div>
<div class="icons__item" data-name="volume-medium"><i class="mdi mdi-volume-medium"></i> mdi-volume-medium</div>
<div class="icons__item" data-name="volume-off"><i class="mdi mdi-volume-off"></i> mdi-volume-off</div>
<div class="icons__item" data-name="walk"><i class="mdi mdi-walk"></i> mdi-walk</div>
<div class="icons__item" data-name="wallet-giftcard"><i class="mdi mdi-wallet-giftcard"></i> mdi-wallet-giftcard</div>
<div class="icons__item" data-name="wallet-membership"><i class="mdi mdi-wallet-membership"></i> mdi-wallet-membership</div>
<div class="icons__item" data-name="wallet-travel"><i class="mdi mdi-wallet-travel"></i> mdi-wallet-travel</div>
<div class="icons__item" data-name="wallet"><i class="mdi mdi-wallet"></i> mdi-wallet</div>
<div class="icons__item" data-name="watch"><i class="mdi mdi-watch"></i> mdi-watch</div>
<div class="icons__item" data-name="web"><i class="mdi mdi-web"></i> mdi-web</div>
<div class="icons__item" data-name="wheelchair-accessibility"><i class="mdi mdi-wheelchair-accessibility"></i> mdi-wheelchair-accessibility</div>
<div class="icons__item" data-name="white-balance-auto"><i class="mdi mdi-white-balance-auto"></i> mdi-white-balance-auto</div>
<div class="icons__item" data-name="white-balance-incandescent"><i class="mdi mdi-white-balance-incandescent"></i> mdi-white-balance-incandescent</div>
<div class="icons__item" data-name="white-balance-irradescent"><i class="mdi mdi-white-balance-irradescent"></i> mdi-white-balance-irradescent</div>
<div class="icons__item" data-name="white-balance-sunny"><i class="mdi mdi-white-balance-sunny"></i> mdi-white-balance-sunny</div>
<div class="icons__item" data-name="windows"><i class="mdi mdi-windows"></i> mdi-windows</div>
<div class="icons__item" data-name="youtube-play"><i class="mdi mdi-youtube-play"></i> mdi-youtube-play</div>
<div class="icons__item" data-name="zip-box"><i class="mdi mdi-zip-box"></i> mdi-zip-box</div>
</div>
<h1>Usage</h1>
<pre><code>&lt;i class=&quot;mdi mdi-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a> at <a href="http://materialdesignicons.com/">MaterialDesignIcons.com</a>.</footer>
<script>
(function () {
document.getElementById('icons').onclick = function (e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
document.getElementById('name2').innerHTML = name;
}
})();
</script>
</body>
</html>