Home | History | Annotate | Download | only in demo 
      1 <!doctype html>
      2 <!--
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 
     11 <html>
     12 <head>
     13 
     14   <title>iron-icons demo</title>
     15   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     16   <link rel="import" href="../../paper-styles/demo-pages.html">
     17   <link rel="import" href="../../paper-styles/color.html">
     18   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
     19 
     20   <!-- load default iconset -->
     21   <link rel="import" href="../iron-icons.html">
     22 
     23   <!-- load the rest -->
     24   <link rel="import" href="../av-icons.html">
     25   <link rel="import" href="../communication-icons.html">
     26   <link rel="import" href="../device-icons.html">
     27   <link rel="import" href="../editor-icons.html">
     28   <link rel="import" href="../hardware-icons.html">
     29   <link rel="import" href="../image-icons.html">
     30   <link rel="import" href="../maps-icons.html">
     31   <link rel="import" href="../notification-icons.html">
     32   <link rel="import" href="../social-icons.html">
     33   <link rel="import" href="../places-icons.html">
     34 
     35   <style is="custom-style">
     36 
     37     h2 {
     38       text-transform: capitalize;
     39     }
     40 
     41     iron-icon {
     42       transition: all 0.2s;
     43       -webkit-transition: all 0.2s;
     44     }
     45 
     46     iron-icon:hover {
     47       fill: var(--google-yellow-700);
     48     }
     49 
     50     .set {
     51       margin: auto;
     52       padding: 1em 0;
     53       border-bottom: 1px solid silver;
     54       @apply(--layout-horizontal);
     55       @apply(--layout-wrap);
     56     }
     57 
     58     .set:last-of-type {
     59       border-bottom: none;
     60     }
     61 
     62     .set:nth-of-type(4n-3) {
     63       color: var(--paper-grey-700);
     64     }
     65 
     66     .set:nth-of-type(4n-2) {
     67       color: var(--paper-pink-500);
     68     }
     69 
     70     .set:nth-of-type(4n-1) {
     71       color: var(--google-green-500);
     72     }
     73 
     74     .set:nth-of-type(4n) {
     75       color: var( --google-blue-500);
     76     }
     77 
     78     .container {
     79       min-width: 10em;
     80       padding: 1em 0.5em;
     81       text-align: center;
     82       @apply(--layout-vertical);
     83       @apply(--layout-center);
     84       @apply(--layout-flex-1);
     85     }
     86 
     87     .container > div {
     88       margin-top: 0.5em;
     89       color: black;
     90       font-size: 10px;
     91     }
     92 
     93   </style>
     94 
     95 </head>
     96 <body>
     97 
     98   <template is="dom-bind">
     99 
    100    <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
    101 
    102     <template is="dom-repeat" items="{{iconsets}}">
    103 
    104       <h2>{{item.name}}</h2>
    105 
    106       <div class="set">
    107 
    108         <template is="dom-repeat" items="{{getIconNames(item)}}">
    109 
    110           <span class="container">
    111             <iron-icon icon="{{item}}"></iron-icon>
    112             <div>{{item}}</div>
    113           </span>
    114 
    115         </template>
    116 
    117       </div>
    118 
    119     </template>
    120 
    121   </template>
    122 
    123   <script>
    124 
    125     document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
    126       return iconset.getIconNames();
    127     };
    128 
    129   </script>
    130 
    131 </body>
    132 </html>
    133