• 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
12<html>
13<head>
14
15  <title>iron-iconset-svg</title>
16  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17
18  <link href="../../paper-styles/demo-pages.html" rel="import">
19
20  <link rel="import" href="svg-sample-icons.html">
21  <style is="custom-style">
22
23    .centered {
24      text-align: center;
25    }
26
27    iron-icon {
28      height: 64px;
29      width: 64px;
30      margin: auto 1em;
31    }
32
33    iron-icon:nth-of-type(1) {
34      fill: orange;
35    }
36
37    iron-icon:nth-of-type(2) {
38      fill: green;
39    }
40
41    iron-icon:nth-of-type(3) {
42      fill: navy;
43    }
44
45    iron-icon:nth-of-type(4) {
46      fill: red;
47    }
48
49    iron-icon {
50      transition: all 0.5s;
51      -webkit-transition: all 0.5s;
52    }
53
54    iron-icon:hover {
55      -webkit-filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
56      filter: drop-shadow( 2px 2px 2px var(--google-grey-700) );
57    }
58  </style>
59</head>
60<body>
61
62  <div class="vertical-section vertical-section-container centered">
63    <iron-icon icon="svg-sample-icons:codepen"></iron-icon>
64    <iron-icon icon="svg-sample-icons:twitter"></iron-icon>
65    <iron-icon icon="svg-sample-icons:youtube"></iron-icon>
66    <iron-icon icon="inline:shape"></iron-icon>
67  </div>
68
69</body>
70</html>
71