[MD settings] icon color and sizing centralized

This CL moves the common iron-icon coloring and sizing
to the settings shared style-module.  The variations
and one-offs are now in more specific files (such as
the side nav icons).

BUG=589630

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

Cr-Commit-Position: refs/heads/master@{#381772}

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_list_item.css

@@ -15,7 +15,6 @@
 
 iron-icon {
   -webkit-padding-start: 10px;
-  color: green;
 }
 
 paper-item:hover {

chrome/browser/resources/settings/controls/settings_dropdown_menu.html

@@ -16,12 +16,8 @@
       }
 
       paper-dropdown-menu {
-        --iron-icon-fill-color: {
-          var(--paper-grey-800);
-        };
-        --iron-icon-stroke-color: {
-          var(--paper-grey-800);
-        };
+        --iron-icon-fill-color: var(--paper-grey-800);
+        --iron-icon-stroke-color: var(--paper-grey-800);
         --paper-font-subhead: {
           font-size: inherit;
         };

chrome/browser/resources/settings/people_page/change_picture.css

@@ -23,9 +23,7 @@
 
 #availableIcons iron-icon {
   border: 1px solid var(--google-grey-500);
-  height: 32px;
   padding: 17px;
-  width: 32px;
 }
 
 #availableIcons .iron-selected {

chrome/browser/resources/settings/people_page/user_list.css

@@ -2,15 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.clear-icon {
-  color: #6e6e6e;
-}
-
-.clear-icon::shadow iron-icon {
-  height: 18px;
-  width: 18px;
-}
-
 .soft-border {
   border: 1px solid #c4c4c4;
   border-radius: 2px;

chrome/browser/resources/settings/settings_menu/settings_menu.html

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/social-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <if expr="chromeos">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html">
@@ -13,11 +14,11 @@
 
 <dom-module id="settings-menu">
   <template>
-    <style>
+    <style include="settings-shared">
       iron-icon {
+        --iron-icon-fill-color: var(--settings-side-nav-color);
+        --iron-icon-stroke-color: var(--settings-side-nav-color);
         -webkit-margin-end: 16px;
-        height: 20px;
-        width: 20px;
       }
 
       .menu-trigger span {
@@ -26,8 +27,8 @@
       }
 
       paper-menu {
-        background-color: rgb(236, 239, 241);
-        color: #5a5a5a;
+        background-color: var(--settings-background-color);
+        color: var(--settings-side-nav-color);
         font-size: 13px;
         --paper-menu-selected-item: {
           font-weight: 500;
@@ -45,7 +46,7 @@
 
       paper-submenu paper-menu {
         --paper-menu-selected-item: {
-          color: #4285f4;
+          color: var(--google-blue-500);
           font-weight: 500;
         };
         padding: 0;

chrome/browser/resources/settings/settings_shared_css.html

@@ -6,10 +6,22 @@
         --checkbox-margin-start: 2px;
         --checkbox-size: 16px;
         --checkbox-spacing: 18px;
+        --iron-icon-fill-color: var(--paper-grey-500);
+        --iron-icon-height: 20px;
+        --iron-icon-stroke-color: var(--paper-grey-500);
+        --iron-icon-width: 20px;
+        --paper-icon-button: {
+          width: 36px;
+          height: 36px;
+        }
+        --settings-background-color: var(--paper-blue-grey-50);
         --settings-secondary: {
           color: var(--paper-grey-500);
           font-weight: 400;
         }
+        --settings-side-nav-color: var(--google-grey-600);
+        /* TODO(dschuyler): replace this rgb with a --paper color */
+        --settings-title-bar-color: rgb(52, 73, 94);
       }
 
       h2 {
@@ -22,12 +34,10 @@
         min-height: 40px;
       }
 
-      iron-icon {
-        color: var(--paper-grey-300);
-      }
-
+      iron-icon[icon=check],
       iron-icon[icon=done] {
-        color: var(--google-green-500);
+       --iron-icon-fill-color: var(--google-green-500);
+       --iron-icon-stroke-color: var(--google-green-500);
       }
 
       paper-button {
@@ -138,12 +148,6 @@
         border-bottom: 1px solid var(--paper-grey-300);
       }
 
-      .list-item iron-icon {
-        @apply(--layout-center);
-        height: 20px;
-        width: 20px;
-      }
-
       .list-item select {
         -webkit-margin-start: 4px;
       }
@@ -192,12 +196,6 @@
         min-height: 52px;
       }
 
-      .settings-box iron-icon {
-        @apply(--layout-center);
-        height: 20px;
-        width: 20px;
-      }
-
       .settings-box .secondary {
         @apply(--settings-secondary);
       }