Update Sky widgets to have more material design

sky/framework/sky-radio.sky

 <!--
 // 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-button.sky" />
 <import src="sky-element.sky" />
+<import src="sky-icon.sky" />
 
-<sky-element attributes="selected:boolean, group:string, highlight:boolean">
+<sky-element attributes="selected:boolean, group:string">
 <template>
   <style>
     :host {
       display: inline-block;
       -webkit-user-select: none;
-      width: 14px;
-      height: 14px;
-      border-radius: 7px;
-      border: 1px solid blue;
-      margin: 0 5px;
-    }
-    dot {
-      -webkit-user-select: none;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
-      background-color: black;
-      margin: 2px;
+      margin: 8px 16px;
     }
   </style>
-  <dot />
+  <sky-icon size="18" />
 </template>
 <script>
 import "dart:sky";
 
 final Map<Node, _RadioGroupController> _controllerMap = new Map();
 
 class _RadioGroupController {
   static _RadioGroupController forRadio(radio) {
     Node owner = radio.owner;
     return _controllerMap.putIfAbsent(owner, () =>
@@ skipping 25 matching lines @@
     _radios.forEach((SkyRadio radio) {
       if (selectedRadio == radio)
         return;
       if (radio.group != group)
         return;
       radio.selected = false;
     });
   }
 }
 
+const String _kOnIcon = 'toggle/radio_button_on_black';
+const String _kOffIcon = 'toggle/radio_button_off_black';
+
 @Tagname('sky-radio')
-class SkyRadio extends SkyButton {
+class SkyRadio extends SkyElement {
   _RadioGroupController _controller;
-  Element _dot;
+  SkyIcon _icon;
 
   SkyRadio() {
     addEventListener('click', _handleClick);
   }
 
   void shadowRootReady() {
-    _dot = shadowRoot.querySelector('dot');
-    _dot.style['display'] = selected ? 'block' : 'none';
+    _icon = shadowRoot.querySelector('sky-icon');
+    _icon.type = selected ? _kOnIcon : _kOffIcon;
   }
 
   void attached() {
     super.attached();
     _controller = _RadioGroupController.forRadio(this);
     _controller.addRadio(this);
   }
 
   void detached() {
     super.detached();
     _controller.removeRadio(this);
     _controller = null;
   }
 
   void selectedChanged(bool oldValue, bool newValue) {
-    if (_dot != null)
-      _dot.style['display'] = newValue ? 'block' : 'none';
+    if (_icon != null)
+      _icon.type = newValue ? _kOnIcon : _kOffIcon;
     if (newValue && _controller != null)
       _controller.takeSelectionFromGroup(this);
   }
 
   void groupChanged(String oldValue, String newValue) {
     if (selected && _controller != null)
       _controller.takeSelectionFromGroup(this);
   }
 
   _handleClick(_) {
     this.selected = true;
   }
 }
 
 _init(script) => register(script, SkyRadio);
 </script>
 </sky-element>