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