Polymer 1.0 default icon set in iron-icons not working using blaze (meteor) templating engine -

-

after upgrading polymer 1.0, default iron-icons set not working. trying use home icon default icon set.

html code fragment:

    <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html">     <link rel="import" href="/components/iron-icons/iron-icons.html">     <link rel="import" href="/components/iron-icons/communication-icons.html">     <link rel="import" href="/components/iron-form/iron-form.html">     <link rel="import" href="/components/iron-selector/iron-selector.html">     <link rel="import" href="/components/iron-pages/iron-pages.html">      <!-- ootb paper elements -->     <link rel="import" href="/components/paper-drawer-panel/paper-drawer-panel.html">     <link rel="import" href="/components/paper-header-panel/paper-header-panel.html">     <link rel="import" href="/components/paper-toolbar/paper-toolbar.html">      <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">     <link rel="import" href="/components/paper-material/paper-material.html">      <link rel="import" href="/components/paper-menu/paper-menu.html">     <link rel="import" href="/components/paper-item/all-imports.html">      <link rel="import" href="/components/paper-tabs/paper-tab.html">     <link rel="import" href="/components/paper-tabs/paper-tabs.html">     <link rel="import" href="/components/paper-tabs/paper-tabs-icons.html">  <paper-icon-item id="socialfeed">          <iron-icon icon="home" item-icon></iron-icon>          <paper-item-body two-line>           <div>social feed</div>           <div secondary>2 unread fb posts</div>         </paper-item-body>  </paper-icon-item>

i getting warning in chrome debugger:[iron-icon::_updateicon]: not find iconset icons, did import iconset? @ line#167 in iron-icon.html

debugging showed in line 163 in iron-icon.html is

this._iconset = this.$.meta.bykey(this._iconsetname);

this._iconsetname has value "icons" this._iconset undefined.

am missing import or here?

edit issue occurs while using blaze template engine in meteor. wanted add bit complete picture.

got real solution (not workaround), therefore opened new answer.

the cause of warning in chrome debugger due wrong timing of loading link imports in right sequence.

solution:

1.) remove link imports in iron-icons (and other icon-sets if needed, maps, social, etc ...):

  • public
    • bower_components
      • iron-icons
        • iron-icons.html
        • maps-icons.html (optional, if using them)
        • social-icons.html (optional, if using them)

iron-icons.html:

before:

<!--@group iron elements @element iron-icons @demo demo/index.html --> <link rel='import' href='../iron-icon/iron-icon.html'> <link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>  <iron-iconset-svg name="icons" size="24">     <svg><defs>     <g id="3d-rotation"><path d="m7.52 21.48c ..... etc ..... /></g>     </defs></svg> </iron-iconset-svg>

after:

<!--@group iron elements @element iron-icons @demo demo/index.html --> <!--<link rel='import' href='../iron-icon/iron-icon.html'> <link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>-->  <iron-iconset-svg name="icons" size="24">     <svg><defs>     <g id="3d-rotation"><path d="m7.52 21.48c ..... etc ..... /></g>     </defs></svg> </iron-iconset-svg>

the initial link-imports (dependencies) blocking (not loading async sync, because that's way should be). however, within code of <link rel='import' href='../iron-icon/iron-icon.html'> iron-icon making reference icon set not load yet (<iron-iconset-svg name="icons" size="24"> etc ...) because comes after initial link-import (due blocking nature of link import). hence, @ line 164 cannot find default iconset icons, , therefore throwing famous warning @ line 167:

could not find iconset icons, did import iconset?

2.) load required dependencies in project file in correct sequence:

<head>   <meta charset="utf-8" />   <title></title>    <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>   <link rel="import" href="/bower_components/polymer/polymer.html">    <link rel="import" href="/bower_components/iron-meta/iron-meta.html">   <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">   <link rel="import" href="/bower_components/iron-iconset-svg/iron-iconset-svg.html">   <link rel="import" href="/bower_components/iron-iconset/iron-iconset.html">    <link rel="import" href="/bower_components/iron-icons/iron-icons.html">   <link rel="import" href="/bower_components/iron-icons/maps-icons.html">   <link rel="import" href="/bower_components/iron-icons/social-icons.html">    <link rel="import" href="/bower_components/iron-icon/iron-icon.html"> </head>

the <link rel="import" href="/bower_components/iron-icon/iron-icon.html"> loaded in last position now, hence dependencies available @ point.

works charm me now.

@luckyray's : please let know whether works you, too. post on github comment polymer team well.


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more