MD Settings: convert paper-icon-button to paper-icon-button-light.

chrome/browser/resources/settings/settings_shared_css.html

Index: chrome/browser/resources/settings/settings_shared_css.html
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index 4ed24f9629e3dbc86f3e7b5a95424e35e6b72446..39458c3c93f7342710d80d6c10d9575d32ff5c7c 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -1,10 +1,11 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="settings_icons_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="cr-shared-style">
+    <style include="settings-icons cr-shared-style">
       /* Use <h2> as the "sub-header" mentioned in the UX design docs. */
       h2 {
         align-items: center;
@@ -28,8 +29,7 @@
       }
 
       paper-icon-button {
-        -webkit-margin-end: var(--cr-icon-ripple-margin);
-        -webkit-margin-start: 16px;
+        @apply(--cr-paper-icon-button-margin);
         color: var(--paper-grey-600);
         flex-shrink: 0;
       }
@@ -335,6 +335,17 @@
         outline: none;
       }
 
+      /* Prevent icon-button's ripples from fighting with potential scrollbars.
+       * Also apply to all iron-lists to align the buttons across them all.*/
+      [scrollable],
+      .scroll-container,
+      iron-list {

[dschuyler, 2017/06/07 23:21:21]

wdyt of something like
.list-item button
akin to line 42 above.

Also, is the rule at line 42 needed with this change?

[scottchen, 2017/06/08 22:13:15]

there's no more paper-icon-button after this cl, so removing line 42.

+        --cr-paper-icon-button-margin: {
+          -webkit-margin-start: 0;

[dschuyler, 2017/06/07 23:21:22]

Where is it necessary to set the -start to zero?

[scottchen, 2017/06/08 22:13:15]

It helps align items with their headers. Otherwise it'll look like this:
http://imgur.com/a/IjK5j

EDIT: 
addressed offline, we always want the spacing before the icon-button, so
removing this margin-start:0 rule.

+          -webkit-margin-end: 0;
+        };
+      }
+
       /* Helper for a list frame to automatically avoid the separator line. */
       .vertical-list > *:not(:first-of-type) {
         border-top: var(--settings-separator-line);