<!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;">
            <h2>Icons</h2>
            <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>
                &nbsp;&nbsp;
                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&amp;business=s%2ekupletsky%40gmail%2ecom&amp;lc=US&amp;item_name=Material%20Design%20Iconic%20Font&amp;currency_code=USD&amp;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 + ' ' + '[&amp#x'+code+';]');
            });
            cheatSheet = true;
        }
    });
</script>

</body>
</html>