third_party/polymer/v1_0/components-chromium/iron-icon/README.md

   1 iron-icon
   2 =========
   3
   4 The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
   5
   6 Example using src:
   7
   8 ```html
   9 <iron-icon src="star.png"></iron-icon>
  10 ```
  11
  12 Example setting size to 32px x 32px:
  13
  14 ```html
  15 <iron-icon class="big" src="big_star.png"></iron-icon>
  16
  17 <style>
  18   .big {
  19     height: 32px;
  20     width: 32px;
  21   }
  22 </style>
  23 ```
  24
  25 The iron elements include several sets of icons.
  26 To use the default set of icons, import  `iron-icons.html` and use the `icon` attribute to specify an icon:
  27
  28 ```html
  29 <!-- import default iconset and iron-icon -->
  30 <link rel="import" href="/components/iron-icons/iron-icons.html">
  31
  32 <iron-icon icon="menu"></iron-icon>
  33 ```
  34
  35 To use a different built-in set of icons, import  `iron-icons/<iconset>-icons.html`, and
  36 specify the icon as `<iconset>:<icon>`. For example:
  37
  38 ```html
  39 <!-- import communication iconset and iron-icon -->
  40 <link rel="import" href="/components/iron-icons/communication-icons.html">
  41
  42 <iron-icon icon="communication:email"></iron-icon>
  43 ```
  44
  45 You can also create custom icon sets of bitmap or SVG icons.
  46
  47 Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
  48
  49 ```html
  50 <iron-icon icon="fruit:cherry"></iron-icon>
  51 ```
  52
  53 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
  54 how to create a custom iconset.
  55
  56 See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.