dart - Dart langのカスタム要素に画像を追加する

Question

マテリアル デザインのような fab アイコンのカスタム要素を作成していて、画像 (アイコン画像) を追加したいのですが、できませんでした。

私は3つのアプローチを試みました：

1. shado.host への .src の追加
2. .src を ImageElement に追加する
3. ButtonElement への .src の追加

2種類の画像も使ってみた

1. PNG
2. SVG

私のコードは以下です：

part of fonix_client_library;

@init()
 upgradeFonixFab() =>  
    document.registerElement(FonixFab.tag, FonixFab);


 class FonixFab extends HtmlElement {
 static final tag = 'fonix-fab';
 ShadowRoot shadow;

 ButtonElement innerButton;
 ImageElement innerImage;

 factory FonixFab() => (new Element.tag(tag) as FonixFab);

 FonixFab.created() : super.created() {

 shadow = this.createShadowRoot();

 shadow.host
 //   ..style.src='ic_create_24px.svg'  <- did not work
 //   ..style.src='ic_create_24px.png'  <- did not work
  ..style.display='inline-block'
  ..style.position = 'fixed' 
  ..style.right='15px'
  ..style.bottom='15px'
  ..style.outline='none'
  ..style.userSelect = 'none'
  ..style.cursor='pointer'
  ..style.zIndex='1'
  ..style.boxSizing = 'border-box'
  ..style.width='26px'
  ..style.height='26px'
  ..style.background = '#d23f31'
  ..style.color='#fff'
  ..style.borderRadius='50%'
  ..style.paddingTop='2px'
  ..style.paddingLeft='1px'
  ;

innerImage = new ImageElement ()
   ..style.src='ic_create_24px.svg'; //  <- did not work

innerButton = new ButtonElement()
 //   ..style.src='ic_create_24px.svg'  <- did not work
 //   ..style.src='ic_create_24px.png'  <- did not work
   ..text="+"                        // <- This is fine for using +, but I need to use image instead
   ..style.cursor='pointer'
   ..style.color= 'white'
   ..style.border="0px"
   ..style.background='#d23f31' 
   ..style.borderRadius='5px';   


  shadow.nodes.add(innerButton);  OR shadow.nodes.add(innerImages);

}

 @override
 void attached() {
  super.attached();

  shadow.host.onMouseDown.listen((e){ 
  shadow.host..style.color="#333"
     ..style.background=themeColor; //'#FF8F66';
  });
  shadow.host.onMouseUp.listen((e){ 
     shadow.host..style.color=themeColor
     ..style.background='#ffd9cc'
     ..style.outline='none';  // remove the focus outline/glur
  });
  shadow.host.onMouseEnter.listen((e)=> shadow.host..style.boxShadow='0px 0px 5px #888888');
  shadow.host.onMouseLeave.listen((e)=> shadow.host..style.boxShadow='0px 0px 0px');
 }

 Remove(){
 this.remove();
 } 
}

でも？