Index: lib/src/iron-icon/iron-icon.html |
diff --git a/lib/src/iron-icon/iron-icon.html b/lib/src/iron-icon/iron-icon.html |
index b7dedd14b88db7438230a9757b93317fc9210a70..ff4951d4db39eb0b6f8ad0e633fb071fc9e957d6 100644 |
--- a/lib/src/iron-icon/iron-icon.html |
+++ b/lib/src/iron-icon/iron-icon.html |
@@ -52,10 +52,11 @@ Example of using an icon named `cherry` from a custom iconset with the ID `fruit |
<iron-icon icon="fruit:cherry"></iron-icon> |
-See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about |
+See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about |
how to create a custom iconset. |
-See [iron-icons](https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html) for the default set of icons. |
+See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available |
+in the various iconsets. |
### Styling |
@@ -66,6 +67,8 @@ Custom property | Description | Default |
----------------|-------------|---------- |
`--iron-icon-width` | Width of the icon | `24px` |
`--iron-icon-height` | Height of the icon | `24px` |
+`--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor` |
+`--iron-icon-stroke-color` | Stroke color of the svg icon | none |
@group Iron Elements |
@element iron-icon |
@@ -84,7 +87,8 @@ Custom property | Description | Default |
vertical-align: middle; |
- fill: currentcolor; |
+ fill: var(--iron-icon-fill-color, currentcolor); |
+ stroke: var(--iron-icon-stroke-color, none); |
width: var(--iron-icon-width, 24px); |
height: var(--iron-icon-height, 24px); |
@@ -129,11 +133,14 @@ Custom property | Description | Default |
type: String, |
observer: '_srcChanged' |
}, |
- |
+ |
+ /** |
+ * @type {!Polymer.IronMeta} |
+ */ |
_meta: { |
value: Polymer.Base.create('iron-meta', {type: 'iconset'}) |
} |
- |
+ |
}, |
_DEFAULT_ICONSET: 'icons', |
@@ -157,12 +164,13 @@ Custom property | Description | Default |
_updateIcon: function() { |
if (this._usesIconset()) { |
if (this._iconsetName) { |
- this._iconset = this._meta.byKey(this._iconsetName); |
+ this._iconset = /** @type {?Polymer.Iconset} */ ( |
+ this._meta.byKey(this._iconsetName)); |
if (this._iconset) { |
this._iconset.applyIcon(this, this._iconName, this.theme); |
+ this.unlisten(window, 'iron-iconset-added', '_updateIcon'); |
} else { |
- this._warn(this._logf('_updateIcon', 'could not find iconset `' |
- + this._iconsetName + '`, did you import the iconset?')); |
+ this.listen(window, 'iron-iconset-added', '_updateIcon'); |
} |
} |
} else { |