如何使用 Dart 和 polymer 1.0.0-rc1 更改 polymer_element 图标的颜色

Question

我有以下文件：

.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>

.飞镖

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

  ready()
  {
  }
}

如何更改语句中 'star' 图标的颜色 | icon = 'star' 同时使用标签和 .dart class.

谢谢

Answer 1

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

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

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