<!DOCTYPE html>
<html class="dark-theme">
<!--<html class="light-theme">-->
<head>
  <meta charset="UTF-8">
  <title>Material Design Icons by @mervick/mdi-icons</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:400,500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"/>
  <link rel="stylesheet" type="text/css" href="style/main.css?v22"/>
  <link rel="stylesheet" type="text/css" href="../css/material-icons.min.css?v4.0.1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="wrap">

    <header>
      <div id="head-panel">
        <div class="container">
          <h1>
            <img class="logo" src="./img/logo.svg">Material Design Icons
          </h1>
          <div class="buttons">
            <a class="github-button" href="https://github.com/mervick/material-design-icons" data-style="mega" data-count-href="/mervick/material-design-icons/stargazers" data-count-api="/repos/mervick/material-design-icons#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mervick/material-design-icons on GitHub">Star</a>
            <a class="github-button" href="https://github.com/mervick/material-design-icons/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download mervick/material-design-icons on GitHub">Download</a>
          </div>
          <div class="repo-link-wrap">
            <a class="repo-link" href="https://github.com/mervick/material-design-icons" target="_blank">@mervick/mdi-icons</a>
          </div>
        </div>
      </div>
    </header>

    <div id="search-panel">
      <div class="container">
        <div class="search-icon search-magnify">
          <i class="mdi mdi-search"></i>
        </div>
        <input type="text" id="search" placeholder="Filter icons" aria-label="Filter icons"/>
        <div class="search-icon clear-icon" style="display: none;">
          <i class="mdi mdi-close"></i>
        </div>
      </div>
    </div>

    <sidebar id="sidebar"></sidebar>

    <div class="container">
      <div class="content">

        <p><a href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">Material Icons</a> are the icon
          set from Google that are designed under the <a href="http://www.google.com/design/spec">material design guidelines</a>.</p>
        <p>Material Icons fonts by default uses a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts">ligatures</a>,
          which allows rendering icons by using its textual name.</p>
        <p>Material Design Icons by <a href="https://github.com/mervick/material-design-icons">@mervick/mdi-icons</a> implements the ability to use the icons by CSS classes instead of ligatures.</p>
        <p>There are 5 themes (fonts) available: <code>Filled (Regular)</code>, <code>Outlined</code>, <code>Rounded</code>, <code>Two-Tone</code> and <code>Sharp</code></p>


        <div id="grid-container"></div>

      </div>
    </div>

    <div id="snackbar"></div>

  </div>

  <footer>
    <div id="footer">
      <div class="container">
        <p>The font files of <a href="https://github.com/google/material-design-icons">Google Material Icons</a> are
          licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0.html">Apache license version 2.0</a>.</p>
        <p>The CSS and SCSS files of Material Design Icons by <a href="https://github.com/mervick/material-design-icons">@mervick/mdi-icons</a> are
          licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>.</p>
      </div>
    </div>
  </footer>

  <script id="sidebar-template" type="text/template">
    <div class="sidebar-block">
      <h4>Themes</h4>
      <ul class="sidebar-themes">
        <li data-theme="THEME_ALL" class="<% if (theme == 'THEME_ALL') { %>active<% } %> d-flex flex-row">
          <i class="mdi mdi-api icon"></i>
          <span class="label">All Icons</span>
        </li>
        <li data-theme="REGULAR" class="<% if (theme == 'REGULAR') { %>active<% } %> d-flex flex-row">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.2 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4.8c0-.99-.81-1.8-1.8-1.8z"/></svg>
          <span class="label">Filled</span>
        </li>
        <li data-theme="OUTLINED" class="<% if (theme == 'OUTLINED') { %>active<% } %> d-flex flex-row">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m.2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4.8c0-.99-.81-1.8-1.8-1.8z"/></svg>
          <span class="label">Outlined</span>
        </li>
        <li data-theme="ROUND" class="<% if (theme == 'ROUND') { %>active<% } %> d-flex flex-row">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2z"/></svg>
          <span class="label">Rounded</span>
        </li>
        <li data-theme="SHARP" class="<% if (theme == 'SHARP') { %>active<% } %> d-flex flex-row">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3L2 21h20z"/></svg>
          <span class="label">Sharp</span>
        </li>
        <li data-theme="TWO_TONE" class="<% if (theme == 'TWO_TONE') { %>active<% } %> d-flex flex-row">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h14L5 19z"/></svg>
          <span class="label">Two-Tone</span>
        </li>
      </ul>

    </div>
  </script>

  <script id="empty-grid" type="text/template">
    <div class="no-results">No matches found</div>
  </script>

  <script id="grid-item" type="text/template">
    <div class="item-container" data-icon="<%= icon.name %>">
      <div class="item">
        <i class="icon-item <%= icon.mdiClass %> mdi-<%= icon.className %>"></i>
        <div class="caption"><%= icon.highlighted %></div>
      </div>
    </div>
  </script>

  <script id="snackbar-template" type="text/template">
    <div class="container">
      <div class="snackbar-header d-flex justify-content-between">
        <div class="left-side">
          <i class="<%= mdiClass %> mdi-<%= className %>"></i>
          <span class="caption"><%= caption %></span>
        </div>
        <div class="right-side d-flex">
          <i class="mdi mdi-code hide-mobile"></i>
          <span class="caption uppercase hide-mobile"><%= font %> FONT</span>
          <i class="mdi mdi-close clear-icon"></i>
        </div>
      </div><div class="snackbar-content flex-snackbar">
        <div class="col">
          <h2>STEP 1: Setup Icon Font</h2>
          <p>Follow the <a href="https://github.com/mervick/material-design-icons" target="_blank">instructions</a>
            to embed the <span class="font"><%= font %></span> font in your site.</p>
        </div>
        <div class="col">
          <h2>STEP 2: Use Icon in Your Site</h2>
          <p class="code comment">&lt;!-- CSS class --&gt;</p>
          <textarea class="code" readonly>&lt;i class=&quot;<%= mdiClass %> mdi-<%= className %>&quot;&gt;&lt;/i&gt;</textarea>
          <p class="code comment">&lt;!-- Ligature --&gt;</p>
          <textarea class="code" readonly>&lt;i class=&quot;<%= ligatureClass %>&quot;&gt;<%= content %>&lt;/i&gt;</textarea>
          <p></p>
        </div>
      </div>
    </div>
  </script>

  <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
  <script src="js/metadata.js?v1.1.3"></script>
  <script src="js/main.js?v1.1.4"></script>

</body>
</html>