third_party/polymer/v1_0/components-chromium/iron-icon/iron-icon.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 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 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-meta/iron-meta.html">
  11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  12
  13 <!--
  14
  15 The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
  16
  17 Example using src:
  18
  19     <iron-icon src="star.png"></iron-icon>
  20
  21 Example setting size to 32px x 32px:
  22
  23     <iron-icon class="big" src="big_star.png"></iron-icon>
  24
  25     <style is="custom-style">
  26       .big {
  27         --iron-icon-height: 32px;
  28         --iron-icon-width: 32px;
  29       }
  30     </style>
  31
  32 The iron elements include several sets of icons.
  33 To use the default set of icons, import  `iron-icons.html` and use the `icon` attribute to specify an icon:
  34
  35     &lt;!-- import default iconset and iron-icon --&gt;
  36     <link rel="import" href="/components/iron-icons/iron-icons.html">
  37
  38     <iron-icon icon="menu"></iron-icon>
  39
  40 To use a different built-in set of icons, import  `iron-icons/<iconset>-icons.html`, and
  41 specify the icon as `<iconset>:<icon>`. For example:
  42
  43     &lt;!-- import communication iconset and iron-icon --&gt;
  44     <link rel="import" href="/components/iron-icons/communication-icons.html">
  45
  46     <iron-icon icon="communication:email"></iron-icon>
  47
  48 You can also create custom icon sets of bitmap or SVG icons.
  49
  50 Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
  51
  52     <iron-icon icon="fruit:cherry"></iron-icon>
  53
  54 See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
  55 how to create a custom iconset.
  56
  57 See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html) for the default set of icons.
  58
  59
  60 ### Styling
  61
  62 The following custom properties are available for styling:
  63
  64 Custom property | Description | Default
  65 ----------------|-------------|----------
  66 `--iron-icon-width` | Width of the icon | `24px`
  67 `--iron-icon-height` | Height of the icon | `24px`
  68
  69 @group Iron Elements
  70 @element iron-icon
  71 @demo demo/index.html
  72 @hero hero.svg
  73 @homepage polymer.github.io
  74 -->
  75
  76 </head><body><dom-module id="iron-icon">
  77
  78   <style>
  79     :host {
  80       @apply(--layout-inline);
  81       @apply(--layout-center-center);
  82       position: relative;
  83
  84       vertical-align: middle;
  85
  86       fill: currentcolor;
  87
  88       width: var(--iron-icon-width, 24px);
  89       height: var(--iron-icon-height, 24px);
  90     }
  91   </style>
  92
  93   <template>
  94     <iron-meta id="meta" type="iconset"></iron-meta>
  95   </template>
  96
  97   </dom-module>
  98 <script src="iron-icon-extracted.js"></script></body></html>