How to change the color of an polymer_element icon using Dart and polymer 1.0.0-rc1

Issue

I have the following files:

.html

<dom-module id = "required-icon">
  <template>
    <style is="custom-style">
      .big {
        --iron-icon-height: 12px;
        --iron-icon-width: 12px;
        margin-right :3px;
      }
    </style>
    <iron-icon
        class = "big"
        id = "z"
        icon = "star"></iron-icon>
    <paper-tooltip
        for = "z"
        position = "right"
        animation-delay = "0">
      <b>Required</b>
    </paper-tooltip>
  </template>
</dom-module>

.dart

@PolymerRegister( "required-icon" )
class RequiredIcon extends PolymerElement {
  RequiredIcon.created( ) : super.created( );

  ready()
  {
  }
}

How can I change the color of the ‘star’ icon in the statement | icon = ‘star’ both using the tag and from the .dart class.

Thanks

Solution

.big {
  color: red;
  fill: red; /* for SVG icons */
} 

$$('iron-icon.big').style..color = 'red'..fill = 'red';

See also
– https://github.com/bwu-dart/bwu_fontawesome_iconset_svg/blob/master/example/example01.html#L20
– https://github.com/PolymerElements/iron-iconset/issues/11

Answered By – Günter Zöchbauer

Answer Checked By – Terry (FlutterFixes Volunteer)