Add custom Polymer network icon element

chrome/browser/resources/chromeos/network_ui/network_ui.css

Index: chrome/browser/resources/chromeos/network_ui/network_ui.css
diff --git a/chrome/browser/resources/chromeos/network_ui/network_ui.css b/chrome/browser/resources/chromeos/network_ui/network_ui.css
index 57162b30aa4c5f447ceba1024ec059eaa8f81c67..34a4e96434f7bc04cbece57585e2c251d36786a0 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.css
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.css
@@ -4,6 +4,11 @@
  * found in the LICENSE file.
  */
 
+paper-button[raised].colored {
+  background: rgb(66, 133, 244);

[michaelpg, 2015/02/05 06:45:51]

where does this come from?

[stevenjb, 2015/02/05 22:41:32]

I just grabbed the color from:
https://www.polymer-project.org/components/paper-elements/demo.html#paper-button

This was initially intended as a proof-of concept. Presumably this is something
we would normally handle in the cr-elements instead.

+  color: rgb(255, 255, 255);
+}
+
 #header {
   margin: 5px;
 }
@@ -12,6 +17,28 @@
   padding: 0 4px;
 }
 
+#header cr-network-icon {
+  height: 25px;
+  width: 25px;
+}
+
+#default-network {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  padding: 4px;
+}
+
+#default-network-text {
+  font-size: 14px;
+  font-weight: bold;
+  padding-left: 8px;
+}
+
+#header #refresh {
+  margin: 4px;
+}
+
 .state-table {
   border-collapse: collapse;
 }
@@ -43,6 +70,12 @@
   white-space: pre-wrap;
 }
 
+.state-table cr-network-icon {
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+}
+
 #advanced-options {
   margin-top: 10px;
 }