Search code examples
dartdart-polymerpaper-elementscore-elements

How can the different core-icons iconsets be used in Dart?

core-icons contains different iconsets like

  • icons
  • av-icons
  • communication-icons
  • device-icons
  • hardware-icons
  • image-icons
  • maps-icons
  • notification-icons
  • png-icons
  • social-icons

It's not obvious how to use them.

Solution

  • Here is an overview of the icons contained in paper-elements http://polymer.github.io/core-icons/components/core-icons/demo.html

    I created an example that demonstrates how to use them.

    <!DOCTYPE html>
<html>
  <head>
    <title>core-icons</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">
    <!-- choose the name according to the set you want to load - "social-icons" -->
    <!-- this is now accessible with a simpler path
    <link rel="import" href="packages/core_elements/src/core-icons/iconsets/social-icons.html"> 
    <link rel="import" href="packages/core_elements/core_icons/iconsets/social_icons.html"> 
    this changed again with core-elements 0.2.0+1 -->
    <link rel="import" href="packages/core_elements/social_icons.html">
  </head>
  <body>

    <!-- use the icon by setting the `icon` attribute. The value consists of iconsset-id a colon followed by the icon name. -->
    <paper-icon-button id="bookmark-button" icon="social:plus-one" style="fill:steelblue;"></paper-icon-button>

    <script type="application/dart">export 'package:polymer/init.dart';</script>
  </body>
</html>

    EDIT

    You can style the icons from Dart code like

    ($['bookmark-button'] as dom.Element).querySelector('* /deep/ #icon').style
    ..setProperty('fill', 'red')
    ..setProperty('stroke', 'blue')
    ..setProperty('stroke-with', '3px');

    This turned out to be quite a bit tricky because the paper-icon-button has more than one shadowRoot (3 actually) and when I set the style on the <g> element (inside the <core-icon>) it was applied but reverted shortly afterwards for unknown reasons.

    I just saw that this doesn't work in Firefox. The polyfill for /deep/ in querySelector() is work in Progress as far as I know. Maybe it will work better as soon as the current Polymer release has been integrated in Polymer.Dart.

    This worked in both Dartium and Firefox:

    ($['bookmark-button'] as dom.Element).shadowRoot.olderShadowRoot.querySelector('#icon').style
    ..setProperty('fill', 'red')
    ..setProperty('stroke', 'blue')
    ..setProperty('stroke-with', '3px');

    This solution might break when the implementation of <paper-icon-button> is changed but hopefully in a while the first attempt will work in all browsers soon.

    EDIT

    Polyfill support for /deep/ in querySelector is included in Polymer.js 0.4.0. Hopefully the next Polymer.dart update includes it as well.