Core-Icon in Polymer.dart

With little difficulty, I was able to convert vanilla HTML in my <x-pizza> Polymer.dart element to Core Elements / Material Design:

The conversion was made easy thanks to earlier work on a JavaScript version of <x-pizza> and the similarities between Polymer.dart and Polymer. More specifically, the Dart version of Core Elements uses the JavaScript Core Elements making things even easier the more I stick with core elements.

Except for <core-icon>. For some reason, my custom SVG images for pizza toppings are all showing up quite small:



In the JavaScript version, from which the Dart custom HTML and CSS was copied directly, the SVG icons look like:



In both Dart and JavaScript versions of the elements, I am using core-icon exactly the same:

              <div class="chip-icon">
                <core-icon
                   hero-id="first_half-icon"
                   hero?="{{selectedTopping == 'first_half' }}"
                   src="packages/paper/assets/first_half.svg"></core-icon>
              </div>

Furthermore, I am styling them exactly the same (following the core-icon documentation):

      .chip-icon core-icon {
        color: white;
        height: 100px;
        width: 100px;
      }

Digging a bit deeper, I find that the Dart version's DOM does not contain a <div> child element like the JavaScript version. Also, the Dart version seems to be explicitly setting the width and heigh to 24 pixels:



Not surprisingly given the differences in results, the Dart Core Element implementation of core-icon turns out to be different than the JavaScript. Instead of re-using the JavaScript core-icon, it has its own pure Dart implementation that includes a size attribute:

    /**
     * Specifies the size of the icon in pixel units.
     *
     * @attribute size
     * @type string
     * @default 24
     */
    size: 24,

It may not be identified in the core_elements package documentation as being pure Dart, but I can always forgive an omission when the code is documented.

After adding the seemingly required size attribute:

              <div class="chip-icon">
                <core-icon
                   hero-id="first_half-icon"
                   hero?="{{selectedTopping == 'first_half' }}"
                   size="100"
                   src="packages/paper/assets/first_half.svg"></core-icon>
              </div>

I have my <x-pizza> element working perfectly under a Material design.

I have this working with Material design principles and with Core elements, but I have yet to try Paper elements in Dart. I have no reason to suspect that they will give me any trouble, but it is still worth playing with a little. Tomorrow.

Day #157

‹prev | My Chain | next›