<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Material Design Icons</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #222;
}
h1, h2, div, footer {
font-family: "Helvetica Neue", Arial, sans-serif;
}
h1 {
padding: 20px 20px 16px 20px;
font-size: 26px;
line-height: 26px;
font-weight: normal;
color: #FFF;
background-color: #2196F3;
}
h1 svg {
vertical-align: middle;
width: 26px;
height: 26px;
margin: 0 6px 4px 0;
}
h1 svg path {
fill: #FFF;
}
h1 .version {
font-size: 14px;
background: #FFF;
padding: 4px 10px;
float: right;
border-radius: 2px;
margin: -3px 0 0 0;
color: #666;
font-weight: bold;
}
h1 .version::before {
content: 'v';
}
h2 {
font-size: 18px;
padding: 20px;
}
.icons {
padding: 0 20px 10px 20px;
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.icons div {
line-height: 2em;
cursor: pointer;
}
.icons div:hover {
color: #3c90be;
}
.icons div i {
display: inline-block;
width: 32px;
text-align: center;
}
.mdi::before {
font-size: 24px;
}
pre {
margin: 0 20px;
font-family: Consolas, monospace;
padding: 10px;
border: 1px solid #DDD;
background: #F1F1F1;
}
footer {
padding: 20px;
color: #666;
border-top: 1px solid #DDD;
background: #F1F1F1;
}
footer a {
color: #e91e63;
text-decoration: none;
}
</style>
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
<svg>
<path d="M0,0H8V3H18V0H26V8H23V18H26V26H18V23H8V21H18V18H21V8H18V5H8V8H5V18H8V26H0V18H3V8H0V0M2,2V6H6V2H2M2,20V24H6V20H2M20,2V6H24V2H20M20,20V24H24V20H20Z"></path>
</svg>
Material Design Icons
<span class="version">1.1.70</span>
</h1>
<h2>Usage</h2>
<pre><code><i class="mdi mdi-<span id="name">name</span>"></i></code></pre>
<h2>Icons</h2>
<div class="icons" id="icons"></div>
<footer>Generated with <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a> at <a href="http://materialdesignicons.com/">MaterialDesignIcons.com</a>.</footer>
<script type="text/javascript">
(function () {
var icons = ['account', 'account-alert', 'account-box', 'account-box-outline', 'account-check', 'account-circle', 'account-key', 'account-location', 'account-minus', 'account-multiple', 'account-multiple-outline', 'account-multiple-plus', 'account-network', 'account-outline', 'account-plus', 'account-remove', 'account-search', 'account-star', 'account-star-variant', 'account-switch', 'airballoon', 'airplane', 'airplane-off', 'alarm', 'alarm-check', 'alarm-multiple', 'alarm-off', 'alarm-plus', 'album', 'alert', 'alert-box', 'alert-circle', 'alert-octagon', 'alpha', 'alphabetical', 'amazon', 'amazon-clouddrive', 'ambulance', 'android', 'android-debug-bridge', 'android-studio', 'apple', 'apple-finder', 'apple-mobileme', 'apple-safari', 'appnet', 'apps', 'archive', 'arrange-bring-forward', 'arrange-bring-to-front', 'arrange-send-backward', 'arrange-send-to-back', 'arrow-all', 'arrow-bottom-left', 'arrow-bottom-right', 'arrow-collapse', 'arrow-down', 'arrow-down-bold', 'arrow-down-bold-circle', 'arrow-down-bold-circle-outline', 'arrow-down-bold-hexagon-outline', 'arrow-expand', 'arrow-left', 'arrow-left-bold', 'arrow-left-bold-circle', 'arrow-left-bold-circle-outline', 'arrow-left-bold-hexagon-outline', 'arrow-right', 'arrow-right-bold', 'arrow-right-bold-circle', 'arrow-right-bold-circle-outline', 'arrow-right-bold-hexagon-outline', 'arrow-top-left', 'arrow-top-right', 'arrow-up', 'arrow-up-bold', 'arrow-up-bold-circle', 'arrow-up-bold-circle-outline', 'arrow-up-bold-hexagon-outline', 'at', 'attachment', 'audiobook', 'auto-fix', 'auto-upload', 'backburger', 'backup-restore', 'bank', 'barcode', 'barley', 'barrel', 'basecamp', 'basket', 'basket-fill', 'basket-unfill', 'battery', 'battery-20', 'battery-30', 'battery-40', 'battery-60', 'battery-80', 'battery-90', 'battery-alert', 'battery-charging-100', 'battery-charging-20', 'battery-charging-30', 'battery-charging-40', 'battery-charging-60', 'battery-charging-80', 'battery-charging-90', 'battery-minus', 'battery-negative', 'battery-outline', 'battery-plus', 'battery-positive', 'battery-unknown', 'beach', 'beaker', 'beaker-empty', 'beaker-empty-outline', 'beaker-outline', 'beats', 'beer', 'behance', 'bell', 'bell-off', 'bell-outline', 'bell-ring', 'bell-ring-outline', 'bell-sleep', 'beta', 'bike', 'bing', 'binoculars', 'bio', 'biohazard', 'black-mesa', 'blackberry', 'blinds', 'block-helper', 'blogger', 'bluetooth', 'bluetooth-audio', 'bluetooth-connect', 'bluetooth-settings', 'blur', 'blur-linear', 'blur-off', 'blur-radial', 'bone', 'book', 'book-multiple', 'book-multiple-variant', 'book-open', 'book-variant', 'bookmark', 'bookmark-check', 'bookmark-music', 'bookmark-outline', 'bookmark-outline-plus', 'bookmark-plus', 'bookmark-remove', 'border-all', 'border-bottom', 'border-color', 'border-horizontal', 'border-inside', 'border-left', 'border-none', 'border-outside', 'border-right', 'border-top', 'border-vertical', 'bowling', 'box', 'briefcase', 'briefcase-check', 'briefcase-download', 'briefcase-upload', 'brightness-1', 'brightness-2', 'brightness-3', 'brightness-4', 'brightness-5', 'brightness-6', 'brightness-7', 'brightness-auto', 'broom', 'brush', 'bug', 'bullhorn', 'bus', 'cake', 'cake-variant', 'calculator', 'calendar', 'calendar-blank', 'calendar-check', 'calendar-clock', 'calendar-multiple', 'calendar-multiple-check', 'calendar-plus', 'calendar-remove', 'calendar-text', 'calendar-today', 'camcorder', 'camcorder-box', 'camcorder-box-off', 'camcorder-off', 'camera', 'camera-iris', 'camera-party-mode', 'camera-switch', 'camera-timer', 'candycane', 'car', 'car-wash', 'carrot', 'cart', 'cart-outline', 'cash', 'cash-multiple', 'cash-usd', 'cast', 'cast-connected', 'castle', 'cat', 'cellphone', 'cellphone-android', 'cellphone-dock', 'cellphone-iphone', 'cellphone-link', 'cellphone-link-off', 'cellphone-settings', 'chair-school', 'chart-arc', 'chart-areaspline', 'chart-bar', 'chart-histogram', 'chart-line', 'chart-pie', 'check', 'check-all', 'checkbox-blank', 'checkbox-blank-circle', 'checkbox-blank-circle-outline', 'checkbox-blank-outline', 'checkbox-marked', 'checkbox-marked-circle', 'checkbox-marked-circle-outline', 'checkbox-marked-outline', 'checkbox-multiple-blank', 'checkbox-multiple-blank-outline', 'checkbox-multiple-marked', 'checkbox-multiple-marked-outline', 'checkerboard', 'chevron-double-down', 'chevron-double-left', 'chevron-double-right', 'chevron-double-up', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up', 'church', 'cisco-webex', 'city', 'clipboard', 'clipboard-account', 'clipboard-alert', 'clipboard-arrow-down', 'clipboard-arrow-left', 'clipboard-check', 'clipboard-outline', 'clipboard-text', 'clippy', 'clock', 'clock-fast', 'close', 'close-box', 'close-box-outline', 'close-circle', 'close-circle-outline', 'close-network', 'closed-caption', 'cloud', 'cloud-check', 'cloud-circle', 'cloud-download', 'cloud-outline', 'cloud-outline-off', 'cloud-upload', 'code-array', 'code-string', 'codepen', 'coffee', 'coffee-to-go', 'coin', 'color-helper', 'comment', 'comment-account', 'comment-account-outline', 'comment-alert', 'comment-alert-outline', 'comment-check', 'comment-check-outline', 'comment-multiple-outline', 'comment-outline', 'comment-plus-outline', 'comment-processing', 'comment-processing-outline', 'comment-remove-outline', 'comment-text', 'comment-text-outline', 'compare', 'compass', 'compass-outline', 'console', 'content-copy', 'content-cut', 'content-paste', 'content-save', 'content-save-all', 'contrast', 'contrast-box', 'contrast-circle', 'cow', 'credit-card', 'credit-card-multiple', 'crop', 'crop-free', 'crop-landscape', 'crop-portrait', 'crop-square', 'crosshairs', 'crosshairs-gps', 'crown', 'cube', 'cube-outline', 'cube-unfolded', 'cup', 'cup-water', 'currency-btc', 'currency-eur', 'currency-gbp', 'currency-inr', 'currency-rub', 'currency-try', 'currency-usd', 'cursor-default', 'cursor-default-outline', 'cursor-move', 'cursor-pointer', 'database', 'database-minus', 'database-outline', 'database-plus', 'debug-step-into', 'debug-step-out', 'debug-step-over', 'delete', 'delete-variant', 'deskphone', 'desktop-mac', 'desktop-tower', 'details', 'deviantart', 'dice', 'dice-1', 'dice-2', 'dice-3', 'dice-4', 'dice-5', 'dice-6', 'directions', 'disk-alert', 'disqus', 'disqus-outline', 'division', 'division-box', 'dns', 'domain', 'dots-horizontal', 'dots-vertical', 'download', 'drag', 'drag-horizontal', 'drag-vertical', 'drawing', 'drawing-box', 'dribbble', 'dribbble-box', 'drone', 'dropbox', 'duck', 'dumbbell', 'earth', 'earth-off', 'edge', 'elevation-decline', 'elevation-rise', 'elevator', 'email', 'email-open', 'email-outline', 'emoticon', 'emoticon-cool', 'emoticon-devil', 'emoticon-happy', 'emoticon-neutral', 'emoticon-poop', 'emoticon-sad', 'emoticon-tongue', 'equal', 'equal-box', 'eraser', 'escalator', 'etsy', 'evernote', 'exclamation', 'exit-to-app', 'export', 'eye', 'eye-off', 'eyedropper', 'eyedropper-variant', 'facebook', 'facebook-box', 'facebook-messenger', 'factory', 'fan', 'fast-forward', 'ferry', 'file', 'file-cloud', 'file-delimited', 'file-document', 'file-document-box', 'file-excel', 'file-excel-box', 'file-find', 'file-image', 'file-image-box', 'file-music', 'file-outline', 'file-pdf', 'file-pdf-box', 'file-powerpoint', 'file-powerpoint-box', 'file-presentation-box', 'file-video', 'file-word', 'file-word-box', 'file-xml', 'film', 'filmstrip', 'filmstrip-off', 'filter', 'filter-outline', 'filter-remove', 'filter-remove-outline', 'filter-variant', 'fire', 'firefox', 'fish', 'flag', 'flag-checkered', 'flag-outline', 'flag-outline-variant', 'flag-triangle', 'flag-variant', 'flash', 'flash-auto', 'flash-off', 'flashlight', 'flashlight-off', 'flattr', 'flip-to-back', 'flip-to-front', 'floppy', 'flower', 'folder', 'folder-account', 'folder-download', 'folder-google-drive', 'folder-image', 'folder-lock', 'folder-lock-open', 'folder-move', 'folder-multiple', 'folder-multiple-image', 'folder-multiple-outline', 'folder-outline', 'folder-plus', 'folder-remove', 'folder-upload', 'food', 'food-apple', 'food-variant', 'football', 'football-helmet', 'format-align-center', 'format-align-justify', 'format-align-left', 'format-align-right', 'format-bold', 'format-clear', 'format-color-fill', 'format-header-1', 'format-header-2', 'format-header-3', 'format-header-4', 'format-header-5', 'format-header-6', 'format-header-pound', 'format-indent-decrease', 'format-indent-increase', 'format-italic', 'format-line-spacing', 'format-list-bulleted', 'format-list-numbers', 'format-paint', 'format-paragraph', 'format-quote', 'format-size', 'format-strikethrough', 'format-subscript', 'format-superscript', 'format-text', 'format-textdirection-l-to-r', 'format-textdirection-r-to-l', 'format-underline', 'forum', 'forward', 'foursquare', 'fridge', 'fullscreen', 'fullscreen-exit', 'function', 'gamepad', 'gamepad-variant', 'gas-station', 'gavel', 'gender-female', 'gender-male', 'gender-male-female', 'gender-transgender', 'gift', 'github-box', 'github-circle', 'glass-flute', 'glass-mug', 'glass-stange', 'glass-tulip', 'gmail', 'google', 'google-chrome', 'google-circles', 'google-circles-communities', 'google-circles-extended', 'google-circles-group', 'google-controller', 'google-controller-off', 'google-drive', 'google-earth', 'google-glass', 'google-maps', 'google-pages', 'google-play', 'google-plus', 'google-plus-box', 'grid', 'grid-off', 'guitar-pick', 'guitar-pick-outline', 'hand-pointing-right', 'hanger', 'hangouts', 'harddisk', 'headphones', 'headphones-box', 'headphones-settings', 'headset', 'headset-dock', 'headset-off', 'heart', 'heart-box', 'heart-box-outline', 'heart-broken', 'heart-outline', 'help', 'help-circle', 'hexagon', 'hexagon-outline', 'history', 'hololens', 'home', 'home-modern', 'home-variant', 'hops', 'hospital', 'hospital-building', 'hospital-marker', 'hotel', 'houzz', 'houzz-box', 'human', 'human-child', 'human-male-female', 'image-album', 'image-area', 'image-area-close', 'image-broken', 'image-filter', 'image-filter-black-white', 'image-filter-center-focus', 'image-filter-drama', 'image-filter-frames', 'image-filter-hdr', 'image-filter-none', 'image-filter-tilt-shift', 'image-filter-vintage', 'import', 'inbox', 'information', 'information-outline', 'instagram', 'instapaper', 'internet-explorer', 'invert-colors', 'jira', 'keg', 'key', 'key-change', 'key-minus', 'key-plus', 'key-remove', 'key-variant', 'keyboard', 'keyboard-backspace', 'keyboard-caps', 'keyboard-close', 'keyboard-off', 'keyboard-return', 'keyboard-tab', 'keyboard-variant', 'label', 'label-outline', 'language-csharp', 'language-css3', 'language-html5', 'language-javascript', 'language-python', 'language-python-text', 'laptop', 'laptop-chromebook', 'laptop-mac', 'laptop-windows', 'lastfm', 'launch', 'layers', 'layers-off', 'leaf', 'library', 'library-books', 'library-music', 'library-plus', 'lightbulb', 'lightbulb-outline', 'link', 'link-variant', 'linkedin', 'linkedin-box', 'linux', 'lock', 'lock-open', 'lock-open-outline', 'lock-outline', 'login', 'logout', 'looks', 'loupe', 'lumx', 'magnify', 'magnify-minus', 'magnify-plus', 'map', 'map-marker', 'map-marker-circle', 'map-marker-multiple', 'map-marker-off', 'map-marker-radius', 'margin', 'markdown', 'marker-check', 'martini', 'material-ui', 'math-compass', 'maxcdn', 'memory', 'menu', 'menu-down', 'menu-left', 'menu-right', 'menu-up', 'message', 'message-alert', 'message-draw', 'message-image', 'message-processing', 'message-reply', 'message-text', 'message-text-outline', 'message-video', 'microphone', 'microphone-off', 'microphone-outline', 'microphone-settings', 'microphone-variant', 'microphone-variant-off', 'minus', 'minus-box', 'minus-circle', 'minus-circle-outline', 'minus-network', 'monitor', 'monitor-multiple', 'more', 'motorbike', 'mouse', 'mouse-off', 'mouse-variant', 'mouse-variant-off', 'movie', 'multiplication', 'multiplication-box', 'music-box', 'music-box-outline', 'music-circle', 'music-note', 'music-note-eighth', 'music-note-half', 'music-note-off', 'music-note-quarter', 'music-note-sixteenth', 'music-note-whole', 'nature', 'nature-people', 'navigation', 'needle', 'nest-protect', 'nest-thermostat', 'newspaper', 'nfc', 'nfc-tap', 'nfc-variant', 'numeric', 'numeric-0-box', 'numeric-0-box-multiple-outline', 'numeric-0-box-outline', 'numeric-1-box', 'numeric-1-box-multiple-outline', 'numeric-1-box-outline', 'numeric-2-box', 'numeric-2-box-multiple-outline', 'numeric-2-box-outline', 'numeric-3-box', 'numeric-3-box-multiple-outline', 'numeric-3-box-outline', 'numeric-4-box', 'numeric-4-box-multiple-outline', 'numeric-4-box-outline', 'numeric-5-box', 'numeric-5-box-multiple-outline', 'numeric-5-box-outline', 'numeric-6-box', 'numeric-6-box-multiple-outline', 'numeric-6-box-outline', 'numeric-7-box', 'numeric-7-box-multiple-outline', 'numeric-7-box-outline', 'numeric-8-box', 'numeric-8-box-multiple-outline', 'numeric-8-box-outline', 'numeric-9-box', 'numeric-9-box-multiple-outline', 'numeric-9-box-outline', 'numeric-9-plus-box', 'numeric-9-plus-box-multiple-outline', 'numeric-9-plus-box-outline', 'nutriton', 'office', 'oil', 'omega', 'onedrive', 'open-in-app', 'open-in-new', 'ornament', 'ornament-variant', 'outbox', 'package', 'package-down', 'package-up', 'package-variant', 'package-variant-closed', 'palette', 'palette-advanced', 'panda', 'pandora', 'panorama', 'panorama-fisheye', 'panorama-horizontal', 'panorama-vertical', 'panorama-wide-angle', 'paper-cut-vertical', 'paperclip', 'parking', 'pause', 'pause-circle', 'pause-circle-outline', 'pause-octagon', 'pause-octagon-outline', 'pen', 'pencil', 'pencil-box', 'pencil-box-outline', 'pharmacy', 'phone', 'phone-bluetooth', 'phone-forward', 'phone-hangup', 'phone-in-talk', 'phone-locked', 'phone-missed', 'phone-paused', 'phone-settings', 'pig', 'pill', 'pin', 'pin-off', 'pine-tree', 'pine-tree-box', 'pinterest', 'pinterest-box', 'pizza', 'play', 'play-box-outline', 'play-circle', 'play-circle-outline', 'playlist-minus', 'playlist-plus', 'playstation', 'plus', 'plus-box', 'plus-circle', 'plus-circle-outline', 'plus-network', 'plus-one', 'pocket', 'poll', 'poll-box', 'polymer', 'popcorn', 'pound', 'pound-box', 'power', 'power-settings', 'presentation', 'presentation-play', 'printer', 'printer-3d', 'pulse', 'puzzle', 'qrcode', 'quadcopter', 'quality-high', 'quicktime', 'radiator', 'radio', 'radio-tower', 'radioactive', 'radiobox-blank', 'radiobox-marked', 'raspberrypi', 'rdio', 'read', 'readability', 'receipt', 'recycle', 'redo', 'redo-variant', 'refresh', 'relative-scale', 'reload', 'remote', 'rename-box', 'repeat', 'repeat-off', 'repeat-once', 'replay', 'reply', 'reply-all', 'reproduction', 'resize-bottom-right', 'responsive', 'rewind', 'ribbon', 'rocket', 'rotate-3d', 'rotate-left', 'rotate-left-variant', 'rotate-right', 'rotate-right-variant', 'routes', 'rss', 'rss-box', 'ruler', 'run', 'satellite', 'satellite-variant', 'scale', 'scale-bathroom', 'school', 'screen-rotation', 'screen-rotation-lock', 'script', 'sd', 'security', 'security-network', 'select', 'select-all', 'select-inverse', 'select-off', 'send', 'server', 'server-minus', 'server-network', 'server-network-off', 'server-off', 'server-plus', 'server-remove', 'server-security', 'settings', 'settings-box', 'shape-plus', 'share', 'share-variant', 'shield', 'shield-outline', 'shopping', 'shopping-music', 'shuffle', 'sigma', 'sign-caution', 'silverware', 'silverware-fork', 'silverware-spoon', 'silverware-variant', 'sim-alert', 'skip-next', 'skip-previous', 'snapchat', 'snowman', 'sort', 'sort-alphabetical', 'sort-ascending', 'sort-descending', 'sort-numeric', 'sort-variant', 'soundcloud', 'source-fork', 'source-pull', 'speaker', 'speaker-off', 'speedometer', 'spellcheck', 'spotify', 'spotlight', 'spotlight-beam', 'stackoverflow', 'star', 'star-circle', 'star-half', 'star-outline', 'stocking', 'stop', 'store', 'store-24-hour', 'stove', 'subway', 'swap-horizontal', 'swap-vertical', 'swim', 'sword', 'sync', 'sync-alert', 'sync-off', 'tab', 'tab-unselected', 'table', 'table-column-plus-after', 'table-column-plus-before', 'table-column-remove', 'table-column-width', 'table-edit', 'table-large', 'table-row-height', 'table-row-plus-after', 'table-row-plus-before', 'table-row-remove', 'tablet', 'tablet-android', 'tablet-ipad', 'tag', 'tag-faces', 'tag-multiple', 'tag-outline', 'tag-text-outline', 'taxi', 'television', 'television-guide', 'temperature-celsius', 'temperature-fahrenheit', 'temperature-kelvin', 'tent', 'terrain', 'text-to-speech', 'text-to-speech-off', 'texture', 'theater', 'theme-light-dark', 'thermometer', 'thermometer-lines', 'thumb-down', 'thumb-down-outline', 'thumb-up', 'thumb-up-outline', 'thumbs-up-down', 'ticket', 'ticket-account', 'tie', 'timelapse', 'timer', 'timer-10', 'timer-3', 'timer-off', 'timer-sand', 'timetable', 'toggle-switch', 'toggle-switch-off', 'tooltip', 'tooltip-edit', 'tooltip-image', 'tooltip-outline', 'tooltip-outline-plus', 'tooltip-text', 'tor', 'traffic-light', 'train', 'tram', 'transcribe', 'transcribe-close', 'transfer', 'tree', 'trello', 'trending-down', 'trending-neutral', 'trending-up', 'trophy', 'trophy-award', 'trophy-variant', 'truck', 'tshirt-crew', 'tshirt-v', 'tumblr', 'tumblr-reblog', 'twitch', 'twitter', 'twitter-box', 'twitter-retweet', 'ubuntu', 'undo', 'undo-variant', 'unfold-less', 'unfold-more', 'untappd', 'upload', 'usb', 'vector-curve', 'vector-point', 'vector-square', 'verified', 'vibrate', 'video', 'video-off', 'video-switch', 'view-agenda', 'view-array', 'view-carousel', 'view-column', 'view-dashboard', 'view-day', 'view-headline', 'view-list', 'view-module', 'view-quilt', 'view-stream', 'view-week', 'vimeo', 'vk', 'voicemail', 'volume-high', 'volume-low', 'volume-medium', 'volume-off', 'walk', 'wallet', 'wallet-giftcard', 'wallet-membership', 'wallet-travel', 'watch', 'watch-export', 'watch-import', 'water', 'water-off', 'water-pump', 'weather-cloudy', 'weather-hail', 'weather-lightning', 'weather-night', 'weather-partlycloudy', 'weather-pouring', 'weather-rainy', 'weather-snowy', 'weather-sunny', 'weather-sunset', 'weather-sunset-down', 'weather-sunset-up', 'weather-windy', 'weather-windy-variant', 'web', 'webcam', 'weight', 'weight-kilogram', 'whatsapp', 'wheelchair-accessibility', 'white-balance-auto', 'white-balance-incandescent', 'white-balance-irradescent', 'white-balance-sunny', 'wifi', 'wii', 'wikipedia', 'window-close', 'window-closed', 'window-maximize', 'window-minimize', 'window-open', 'window-restore', 'windows', 'wordpress', 'worker', 'wunderlist', 'xbox', 'xbox-controller', 'xbox-controller-off', 'xda', 'xml', 'yeast', 'youtube-play', 'zip-box'];
for (var j = 0; j < icons.length; j++) {
var div = document.createElement('div'),
i = document.createElement('i');
i.className = 'mdi mdi-' + icons[j];
i.dataset.name = 'mdi-' + icons[j];
div.appendChild(i);
div.appendChild(document.createTextNode(' mdi-' + icons[j]));
div.onclick = (function (name) {
return function () {
document.getElementById('name').innerHTML = name;
};
})(icons[j]);
document.getElementById('icons').appendChild(div);
}
})();
</script>
</body>
</html>