MD Settings / User Manager: fix blurry avatar icons

chrome/browser/resources/settings/people_page/people_page.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/icon.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/people_page/sync_page.html">
 <link rel="import" href="/people_page/profile_info_browser_proxy.html">
 <link rel="import" href="/people_page/sync_browser_proxy.html">
@@ skipping 16 matching lines @@
 
 <dom-module id="settings-people-page">
   <template>
     <style include="settings-shared">
       setting-box.middle {
         /* Per spec, middle text is indented 20px in this section. */
         -webkit-margin-start: 20px;
       }
 
       #profile-icon {
+        background-position: center;
+        background-repeat: no-repeat;
         border-radius: 20px;
         height: 40px;
-        object-fit: cover;
-        vertical-align: middle;
         width: 40px;
       }
 
       #managed-by-domain-name {
         font-weight: bold;
       }
 
       iron-icon[icon='settings:sync-problem'] {
        --iron-icon-fill-color: var(--settings-error-color);
       }
@@ skipping 15 matching lines @@
         width: var(--iron-icon-width);
       }
 
       paper-checkbox {
         margin: 16px 0 2px;
       }
     </style>
     <settings-animated-pages id="pages" section="people">
       <neon-animatable id="main">
         <div id="picture-subpage-trigger" class="settings-box first two-line">
-          <img id="profile-icon" src="[[profileIconUrl_]]"
-              on-tap="onPictureTap_" actionable>
+          <div id="profile-icon" on-tap="onPictureTap_" actionable
+              style="background-image: [[getIconImageset_(profileIconUrl_)]]">
+          </div>
           <div class="middle">
 <if expr="not chromeos">
             <span id="profile-name" on-tap="onProfileNameTap_" actionable>
               [[profileName_]]
             </span>
 </if>
 <if expr="chromeos">
             <span id="profile-name">
               [[profileName_]]
             </span>
@@ skipping 224 matching lines @@
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>