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

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

 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-user-list">
   <template>
     <style include="settings-shared iron-flex">
       .user-list {
         /* 4 users (the extra 1px is to account for the border-bottom) */
         max-height: calc(4 * (var(--settings-row-two-line-min-height) + 1px));
         overflow-y: auto;
       }
 
       .user {
         border-bottom: var(--settings-separator-line);
       }
 
       .user-icon {
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         border-radius: 20px;
         flex-shrink: 0;
         height: 40px;
         width: 40px;
       }
 
       .user-info {
         -webkit-padding-start: 20px;
       }
+
+      [scrollable] .icon-clear {
+        background-color: transparent;

[stevenjb, 2017/05/03 23:58:59]

Ah. Hrm. I'd rather modify [scrollable] :focus in shared_style_css.html to
[scrollable] div:focus, but that should really be done in a separate CL.

+      }
     </style>
     <div class="user-list" scrollable>
       <template is="dom-repeat" items="[[users_]]">
         <div class="user layout horizontal center two-line">
           <img class="user-icon" src="[[getProfilePictureUrl_(item)]]">
           <div class="flex user-info">
             <div>[[getUserName_(item)]]</div>
             <template is="dom-if" if="[[shouldShowEmail_(item)]]">
               <div class="secondary">[[item.email]]</div>
             </template>
           </div>
-          <paper-icon-button icon="cr:clear" class="clear-icon"
+          <button is="paper-icon-button-light" class="icon-clear"
               on-tap="removeUser_"
               hidden="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
-          </paper-icon-button>
+          </button>
         </div>
       </template>
     </div>
   </template>
   <script src="user_list.js"></script>
 </dom-module>