third_party/polymer/components/core-iconset/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 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>core-iconset</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17   <link rel="import" href="core-iconset.html">
  18   <link rel="import" href="../core-icon/core-icon.html">
  19
  20 </head>
  21 <body unresolved>
  22
  23   <!-- Register an icon set; you can do this anywhere, including an HTMLImport! -->
  24   <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24"
  25       icons="location place starta stopb bus car train walk">
  26   </core-iconset>
  27
  28   <core-iconset id="my-icons-big" src="my-icons-big.png" width="192" iconSize="48"
  29       icons="location place starta stopb bus car train walk">
  30   </core-iconset>
  31
  32   <!-- Now create a bunch of icons using our iconset -->
  33   <core-icon icon="my-icons:location"></core-icon>
  34   <core-icon icon="my-icons:place"></core-icon>
  35   <core-icon icon="my-icons:starta"></core-icon>
  36   <core-icon icon="my-icons:stopb"></core-icon>
  37   <core-icon icon="my-icons:bus"></core-icon>
  38   <core-icon icon="my-icons:car"></core-icon>
  39   <core-icon icon="my-icons:train"></core-icon>
  40   <core-icon icon="my-icons:walk"></core-icon>
  41   <br>
  42   <!-- icons may also be specified by index -->
  43   <style>
  44     .embiggen core-icon {
  45       width: 48px;
  46       height: 48px;
  47     }
  48   </style>
  49
  50   <div class="embiggen">
  51     <core-icon icon="my-icons-big:0"></core-icon>
  52     <core-icon icon="my-icons-big:1"></core-icon>
  53     <core-icon icon="my-icons-big:2"></core-icon>
  54     <core-icon icon="my-icons-big:3"></core-icon>
  55     <core-icon icon="my-icons-big:4"></core-icon>
  56     <core-icon icon="my-icons-big:5"></core-icon>
  57     <core-icon icon="my-icons-big:6"></core-icon>
  58     <core-icon icon="my-icons-big:7"></core-icon>
  59   </div>
  60
  61  </body>
  62 </html>