Add <sky-icon> to access material design widgets

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/947383002

examples/stocks/stocks.sky

@@ -5,6 +5,7 @@
 -->
 <import src="/sky/framework/sky-drawer.sky" />
 <import src="/sky/framework/sky-element.sky" />
+<import src="/sky/framework/sky-icon.sky" />
 <import src="/sky/framework/sky-scrollable.sky" />
 <import src="stock.sky" as='view'/>
 <import src='companylist.sky' as='model'/>
@@ -39,11 +40,8 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 24px;
-      height: 24px;
       padding: 7px;
       margin: 0 8px;
-      background-color: papayawhip;
       color: black;
     }
     #title {
@@ -58,7 +56,7 @@
     I am drawer
   </sky-drawer>
   <sky-toolbar>
-    <div id="menu" />
+    <sky-icon id="menu" type="navigation/menu_white" size="24" />
     I am a stocks app
   </sky-toolbar>
   <sky-scrollable id='stock_list'>

framework/sky-icon.sky

@@ -0,0 +1,33 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="sky-element.sky" />
+
+<sky-element attributes="type:string, size:number">
+<template>
+  <img />
+</template>
+<script>
+import "dart:sky";
+
+const String kAssetBase = '/sky/assets/material-design-icons';
+
+@Tagname('sky-icon')
+class SkyIcon extends SkyElement {
+  void shadowRootReady() {
+    Element img = shadowRoot.firstElementChild;
+    int intSize = size.floor();
+    img.style['height'] = '${intSize}px';
+    img.style['width'] = '${intSize}px';
+    List<String> parts = type.split('/');
+    String category = parts[0];
+    String subtype = parts[1];
+    img.src = '${kAssetBase}/${category}/2x_web/ic_${subtype}_${intSize}dp.png';
+  }
+}
+
+_init(script) => register(script, SkyIcon);
+</script>
+</sky-element>