• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12<head>
13  <title>iron-icon demo</title>
14  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
15  <link rel="import" href="../iron-icon.html">
16  <link rel="import" href="../../iron-iconset/iron-iconset.html">
17  <link href="../../paper-styles/demo-pages.html" rel="import">
18
19  <style is="custom-style">
20    .vertical-section h4 {
21      border-left: 3px solid var(--paper-grey-300);
22      padding-left: 10px;
23    }
24
25    .vertical-section h4:hover {
26      border-left-color: var(--google-blue-700);
27    }
28  </style>
29</head>
30<body>
31  <div class="vertical-section-container centered">
32    <h4>This demo is for a single &lt;iron-icon&gt;. If you're looking for the
33      whole set of available icons, check out the <a href="/elements/iron-icons?view=demo:demo/index.html">&lt;iron-icons&gt; demo.</a></h5>
34
35    <div class="vertical-section">
36      <!-- iron-icon using a iron-iconset as its icon source -->
37      <iron-iconset name="example" icons="location" src="location.png" size="24" width="24"></iron-iconset>
38
39      <h4>&lt;iron-icon icon="example:location"&gt;</h4>
40      <iron-icon icon="example:location"></iron-icon>
41
42      <!-- iron-icon using an image url as its icon source -->
43      <h4>&lt;iron-icon src="location.png"&gt;</h4>
44      <iron-icon src="location.png"></iron-icon>
45    </div>
46  </div>
47</body>
48</html>
49