Issue
ui-scafold from polymer-ui-elements. One of the elements I use is the polymer-ui-icon-button. I can set which icon to use from a selection of options, like ‘refresh’, which uses the icon from a large image at a particular position in that image. Standard CSS stuff. One example is
<polymer-ui-icon-button tool icon="refresh" on-click="{{refresh}}"></polymer-ui-icon-button>
and when used in Dartium, works perfectly. However, when I serve this through
pub serve
it gets rewritten to be
<polymer-ui-icon-button tool icon="packages/gcanvas/elements/refresh" on-click="{{refresh}}"></polymer-ui-icon-button>
by one of the transformers, maybe polymer, (I assume), but this means when it looks up this string in the icon list, none of them match, so I get a blank icon. I managed to overcome this with
<polymer-ui-icon-button tool icon="{{refreshIcon}}" on-click="{{refresh}}"></polymer-ui-icon-button>
with
var refreshIcon = 'refresh'
but I can’t do this easily to
<polymer-ui-icon-button icon="menu" hidden?="{{hideMenuButton}}" on-click="{{menuActionTap}}" active="{{menuActive}}"></polymer-ui-icon-button>
which is part of the polymer-ui-scafold element.
Is there a way to tell the transformer to not rewrite this attribute. and/or should I create a bug report?
Solution
I think this is this bug https://code.google.com/p/dart/issues/detail?id=17914
My workaround was to move the image after deployment to the place where the browser is looking for it.
I think a few additional stars on this bug might help 😉
Answered By – Günter Zöchbauer
Answer Checked By – Marie Seifert (FlutterFixes Admin)