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

chrome/browser/resources/settings/settings_shared_css.html

 <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;
         align-self: flex-start;
         color: var(--paper-grey-600);
         display: flex;
         font-size: inherit;
         font-weight: 500;
         margin: 0;
         padding-bottom: 12px;
         padding-top: 24px;
       }
 
       iron-icon {
         flex-shrink: 0;  /* Prevent distortion of icons in cramped UI. */
       }
 
       iron-icon[icon='cr:check'],
       iron-icon[icon='settings:done'] {
        --iron-icon-fill-color: var(--google-green-500);
       }
 
-      paper-icon-button {
-        -webkit-margin-end: var(--cr-icon-ripple-margin);
-        -webkit-margin-start: 16px;
-        color: var(--paper-grey-600);
-        flex-shrink: 0;
-      }
-
-      .separator + button[is='paper-icon-button-light'],
-      .separator + paper-icon-button {
-        -webkit-margin-start: var(--cr-icon-ripple-margin));
-      }
-
-      .list-item paper-icon-button {
-        /* Workaround iron-list cutting off ripples on paper-icon-buttons.
-         * TODO(dschuyler): Can the end margin be done differently to allow for
-         * ripples to look like they are overlapping the margin. */
-        -webkit-margin-end: 0;
+      .separator + button[is='paper-icon-button-light'] {
+        -webkit-margin-start: var(--cr-icon-ripple-margin);
       }
 
       /* See notes in .primary-button.
        * TODO(dschuyler): Remove unnecessary .secondary-button references. */
       paper-button {
         --paper-button: {
           -webkit-padding-end: var(--settings-button-edge-spacing);
           -webkit-padding-start: var(--settings-button-edge-spacing);
           color: var(--paper-grey-600);
           font-weight: 500;
@@ skipping 271 matching lines @@
       /* Expand to fill-up available space. */
       .settings-row.wide {
         flex: 1;
       }
 
       .no-outline {
         background: none;
         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],
+      iron-list,
+      .list-item {
+        --cr-paper-icon-button-margin: {
+          -webkit-margin-end: 0;
+          -webkit-margin-start: var(--cr-icon-button-margin-start);
+        };
+      }
+
       /* Helper for a list frame to automatically avoid the separator line. */
       .vertical-list > *:not(:first-of-type) {
         border-top: var(--settings-separator-line);
       }
 
       /* The separator a vertical line like a horizontal rule <hr> tag, but goes
        * the other way. An example is near the |sign out| button on the People
        * settings. */
       :-webkit-any(.settings-box, .list-item) .separator {
         -webkit-border-start: var(--settings-separator-line);
@@ skipping 59 matching lines @@
         transform: rotate(-135deg);
       }
 
       .column-header {
         color: var(--paper-grey-600);
         font-weight: 500;
       }
     </style>
   </template>
 </dom-module>