<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Material Design Iconic Font :: Icons</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="http://zavoloklom.github.io/material-design-iconic-font/css/docs.md-iconic-font.min.css"> -->
<link rel="stylesheet" href="css/material-design-iconic-font.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div id="top"></div>
<div id="navbar" class="navbar navbar-default navbar-static-top hidden-print">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="md md-menu md-lg"></i>
</button>
<a class="navbar-brand" href="http://zavoloklom.github.io/material-design-iconic-font/index.html"><strong>Material Design</strong> Iconic Font</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-sm "><a href="http://zavoloklom.github.io/material-design-iconic-font/index.html">Get Started</a></li>
<li class="active"><a href="Material-Design-Iconic-Font.html">Icons</a></li>
<li ><a href="http://zavoloklom.github.io/material-design-iconic-font/examples.html">Examples</a></li>
<li><a href="http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html">Cheatsheet</a></li>
<li><a href="http://zavoloklom.github.io/material-design-iconic-font/license.html">License</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron jumbotron-img hidden-print" style="background-image: url(http://zavoloklom.github.io/material-design-iconic-font/images/header-bg.png)">
<div class="container">
<div class="col-xs-12">
<img src="http://zavoloklom.github.io/material-design-iconic-font/icons/favicon-96x96.png" style="float: left; padding-top: 15px; padding-right: 24px;">
<h1>Icons</h1>
<p>The complete icons set in Material Design Iconic Font.</p>
<div class="inflated-egos">
<a href="https://github.com/zavoloklom/material-design-iconic-font" target="_blank">GitHub Project</a>
Created by <a href="http://twitter.com/zavoloklom">Sergey Kupletsky</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-9 col-xs-12" role="main" id="icons">
<!-- Icon sets -->
<h2 class="page-header">Icons</h2>
<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>
<div class="icon col-sm-4 col-xs-6" data-name="<%= glyph %>" data-code="<%= (61697 + glyphIdx).toString(16) %>"><p><i class="<%= baseClass %> <%= classPrefix %><%= glyph %> zmd-fw"></i> <span><%= glyph %></span></p></div>
<% } %>
</div>
<div class="col-md-3 hidden-sm hidden-xs hidden-print">
<div data-spy="affix" data-offset-top="450" data-offset-bottom="70" class="bs-docs-sidebar affix-top" role="complementary">
<ul class="nav bs-docs-sidenav">
<li><a href="#" id="toggler">Switch to <span>Cheatsheet</span></a></li>
<li><a href="#icons"><i class="zmdi zmd-flag"></i> Icons</a></li>
</ul>
<a class="back-to-top" href="#top">Back to top</a>
</div>
</div>
</div>
</div>
<footer class="container">
<div class="col-md-9 col-xs-12">
<hr>
<span class="pull-left"><a href="https://github.com/zavoloklom" target="_blank"><img src="http://zavoloklom.github.io/material-design-iconic-font/img/doctocat.png"></a></span>
<p class="mdt-subhead-2"><strong>Donate:</strong> You can support me via <a class="paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=s%2ekupletsky%40gmail%2ecom&lc=US&item_name=Material%20Design%20Iconic%20Font&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted">PayPal</a>, <a class="webmoney" href="https://funding.webmoney.ru/material-design-iconic-font/donate">WebMoney</a> or <a class="gratipay" href="http://gratipay.com/zavoloklom/" target="_blank">Gratipay</a></p>
<p class="mdt-body-1">
<a href="https://github.com">GitHub</a> is the best way to build and ship software.<br>
Powerful collaboration, code review, and code management for open source and private projects.
</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://zavoloklom.github.io/material-design-iconic-font/js/main.js"></script>
<script>
var cheatSheet = false;
var containers = jQuery('.icon');
jQuery('#toggler').on('click', function(e){
e.preventDefault();
if (cheatSheet) {
jQuery('#toggler').find('span').html('Cheatsheet');
containers.each(function(){
var code = jQuery(this).data('code');
var name = jQuery(this).data('name');
var icon = jQuery(this).find('i');
var span = jQuery(this).find('span');
icon.addClass('zmdi-'+name);
icon.html('');
span.html(name);
});
cheatSheet = false;
} else {
jQuery('#toggler').find('span').html('Icons');
containers.each(function(){
var code = jQuery(this).data('code');
var name = jQuery(this).data('name');
var icon = jQuery(this).find('i');
var span = jQuery(this).find('span');
icon.removeClass('zmdi-'+name);
icon.html('&#x'+code);
span.html(name + ' ' + '[&#x'+code+';]');
});
cheatSheet = true;
}
});
</script>
</body>
</html>