1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject 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
