Hi,
I am creating a component with an iron-icon and a css hexagon background to
use it for all my buttons.
The component's icon custom styles have to be set dynamically.
Here is my html page :
<template>
<style is="custom-style">
:root {
--iron-icon-height: 24px;
--iron-icon-width: 24px;
--iron-icon-fill-color: currentcolor;
}
</style>
<div class="hexagon"></div>
<template is="dom-if" if="{{hasIcon}}">
<iron-icon class="icon" icon$="{{icon}}"></iron-icon>
</template>
</template>
here is my js code :
Polymer({
is: "hexagon-icon",
properties: {
size: {type: Number},
hasIcon: {type: Boolean},
icon: {type: String},
iconFillColor: {type: String}
},
attached: function() {
if (this.hasIcon) {
this.customStyle['--iron-icon-width'] = this.size + 'px';
this.customStyle['--iron-icon-height'] = this.size + 'px';
if (this.iconFillColor != undefined && this.iconFillColor != null) {
this.customStyle['--iron-icon-fill-color'] = this.iconFillColor;
}
this.updateStyles();
}
}
I did this as specified in the polymer documentation
<https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api> but
unfortunately it doesn't work.
Thanks in advance for your help.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/f27076f2-396b-4920-bc10-fe6ab5b64b18%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
