Change element custom style dynamically

[Matthieu Dumont]

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 but unfortunately it doesn't work.

Thanks in advance for your help.