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     <link rel="import" href="/components/iron-icons/iron-icons.html">
  36
  37     <iron-icon icon="menu"></iron-icon>
  38
  39 To use a different built-in set of icons, import the specific `iron-icons/<iconset>-icons.html`, and
  40 specify the icon as `<iconset>:<icon>`. For example, to use a communication icon, you would
  41 use:
  42
  43     <link rel="import" href="/components/iron-icons/communication-icons.html">
  44
  45     <iron-icon icon="communication:email"></iron-icon>
  46
  47 You can also create custom icon sets of bitmap or SVG icons.
  48
  49 Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
  50
  51     <iron-icon icon="fruit:cherry"></iron-icon>
  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](https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html) for the default set of icons.
  57
  58
  59 ### Styling
  60
  61 The following custom properties are available for styling:
  62
  63 Custom property | Description | Default
  64 ----------------|-------------|----------
  65 `--iron-icon-width` | Width of the icon | `24px`
  66 `--iron-icon-height` | Height of the icon | `24px`
  67
  68 @group Iron Elements
  69 @element iron-icon
  70 @demo demo/index.html
  71 @hero hero.svg
  72 @homepage polymer.github.io
  73 -->
  74
  75 </head><body><dom-module id="iron-icon">
  76
  77   <style>
  78     :host {
  79       @apply(--layout-inline);
  80       @apply(--layout-center-center);
  81       position: relative;
  82
  83       vertical-align: middle;
  84
  85       fill: currentcolor;
  86
  87       width: var(--iron-icon-width, 24px);
  88       height: var(--iron-icon-height, 24px);
  89     }
  90   </style>
  91
  92   <template>
  93   </template>
  94
  95   </dom-module>
  96 <script src="iron-icon-extracted.js"></script></body></html>