|
8 | 8 | -->
|
9 | 9 | <!--
|
10 | 10 |
|
11 |
| -The `core-icon` element displays an icon. By default an icon renders as 24px square. |
| 11 | +The `core-icon` element displays an icon. By default an icon renders as a 24px square. |
12 | 12 |
|
13 | 13 | Example using src:
|
14 | 14 |
|
|
25 | 25 | }
|
26 | 26 | </style>
|
27 | 27 |
|
28 |
| -Example using icon from default iconset: |
| 28 | +The core elements include several sets of icons. |
| 29 | +To use the default set of icons, import `core-icons.html` and use the `icon` attribute to specify an icon: |
| 30 | +
|
| 31 | +Example of using an icon from the default iconset: |
| 32 | + |
| 33 | + <!-- import default iconset and core-icon --> |
| 34 | + <link rel="import" href="/components/core-icons/core-icons.html"> |
29 | 35 |
|
30 | 36 | <core-icon icon="menu"></core-icon>
|
| 37 | + |
| 38 | +To use a different built-in set of icons, import `core-icons/<iconset>-icons.html`, and |
| 39 | +specify the icon as `<iconset>:<icon>`. For example: |
| 40 | +
|
| 41 | + <!-- import communication iconset and core-icon --> |
| 42 | + <link rel="import" href="/components/core-icons/communication-icons.html"> |
| 43 | +
|
| 44 | + <core-icon icon="communication:email"></core-icon> |
| 45 | + |
| 46 | +You can also create custom icon sets of bitmap or SVG icons. |
| 47 | +
|
31 | 48 |
|
32 |
| -Example using icon `cherry` from custom iconset `fruit`: |
| 49 | +Example of using an icon named `cherry` from a custom iconset with the ID `fruit`: |
33 | 50 |
|
34 | 51 | <core-icon icon="fruit:cherry"></core-icon>
|
35 | 52 |
|
36 | 53 | See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
|
37 |
| -how to use a custom iconset. |
| 54 | +how to create a custom iconset. |
38 | 55 |
|
39 |
| -See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons. To use the default set of icons you'll need to include an import for `core-icons.html`. To use a different built-in set of icons, you'll need to include an import for `core-icons/iconsets/<iconset>.html`. |
| 56 | +See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons. |
40 | 57 |
|
41 | 58 | @group Polymer Core Elements
|
42 | 59 | @element core-icon
|
|
0 commit comments