ChromeOS OOBE: display icons specific to screen DPI.

chrome/browser/resources/chromeos/login/oobe_welcome.html

 <!-- Copyright 2016 The Chromium Authors. All rights reserved.
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_network_select.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
 
-<iron-iconset-svg name="oobe-welcome" size="24">
-  <svg>
-    <defs>
-      <g id="wifi"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path></g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
 <iron-iconset-svg name="oobe-welcome-20" size="20">
   <svg>
     <defs>
       <g id="add-cellular" fill="none" fill-rule="evenodd">
         <path d="M1 0h18v18H1"></path>
         <path d="M9.207 16H2L17 1v8.6c-.75-.384-1.6-.6-2.5-.6C11.462 9 9 11.462 9 14.5c0 .52.072 1.023.207 1.5z" fill-opacity=".3" fill="#000"></path>
         <path d="M16 14v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z" fill="#000"></path>
       </g>
       <g id="add-wifi" fill="none" fill-rule="evenodd">
         <g fill="#000">
           <path d="M10.044 17.25L1.5 6.26c.33-.255 3.593-3.01 8.5-3.01 4.9 0 8.17 2.755 8.5 3.01L16.81 8.46c-.49-.156-1.012-.24-1.552-.24-2.904 0-5.258 2.426-5.258 5.42 0 .997.262 1.932.718 2.735l-.674.877z" fill-opacity=".3"></path>
           <path d="M17 13v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path>
         </g>
       </g>
       <g id="add-proxy" fill="none" fill-rule="evenodd">
         <g fill="#000">
           <path d="M16 14v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path>
           <path d="M8.04 15.48c-.74-.1-1.43-.33-2.06-.66-.04-.02-.07-.03-.11-.05l-.24-.15c-.09-.05-.18-.11-.27-.17-.06-.04-.11-.08-.17-.13-.11-.07-.21-.15-.31-.23-.05-.04-.09-.08-.14-.12-.1-.1-.2-.19-.3-.29l-.12-.12c-.09-.11-.19-.21-.28-.33-.04-.04-.07-.08-.1-.12-.09-.12-.18-.24-.26-.36-.03-.04-.06-.09-.09-.13-.08-.13-.15-.25-.22-.38-.03-.05-.06-.1-.08-.15-.07-.13-.13-.26-.19-.4-.02-.05-.05-.1-.07-.16-.05-.13-.1-.27-.14-.41-.02-.05-.04-.11-.06-.17-.04-.14-.07-.28-.1-.42-.02-.06-.04-.13-.05-.19-.03-.15-.05-.29-.06-.44l-.03-.18c-.02-.21-.03-.42-.03-.64 0-.5.06-.97.16-1.44l3.75 3.86v.81c0 .88.71 1.61 1.57 1.61v1.56zm3.13-5.4v-.19c0-.45-.35-.81-.78-.81h-4.7V7.47h1.57c.43 0 .78-.36.78-.81V5.05H9.6c.86 0 1.57-.73 1.57-1.61v-.33c2.06.86 3.57 2.82 3.86 5.16h-.01c0 .04.01.07.01.1h.12c.51 0 1 .07 1.47.21 0-.1 0-.21-.01-.31-.32-3.24-2.51-5.93-5.44-6.88h-.01c-.03-.01-.06-.02-.08-.03-.2-.06-.4-.11-.6-.16-.07-.01-.14-.02-.2-.04-.18-.03-.36-.06-.53-.08-.07-.01-.14-.02-.2-.02-.24-.03-.48-.04-.73-.04C4.5 1.02 1 4.63 1 9.08c0 4.45 3.5 8.06 7.82 8.06.51 0 1-.05 1.48-.14-.47-.85-.74-1.83-.74-2.87 0-1.58.61-3.01 1.61-4.05z" fill-opacity=".3"></path>
         </g>
       </g>
     </defs>
   </svg>
 </iron-iconset-svg>
+
+<iron-iconset-svg name="oobe-welcome-32" size="32">
+  <svg>
+    <defs>
+      <g id="accessibility" fill-rule="evenodd">
+        <path d="M16 2.667c1.467 0 2.667 1.184 2.667 2.633 0 1.448-1.2 2.632-2.667 2.632-1.467 0-2.667-1.184-2.667-2.632 0-1.45 1.2-2.633 2.667-2.633zm4 9.215v16.785h-3v-7.9h-2v7.9h-3V11.882H4V8.92h24v2.962h-8z"></path>
+      </g>
+      <g id="language" fill-rule="evenodd">
+        <path d="M15.987 2.667C8.627 2.667 2.667 8.64 2.667 16s5.96 13.333 13.32 13.333c7.373 0 13.346-5.973 13.346-13.333S23.36 2.667 15.987 2.667zm9.24 8h-3.934C20.867 9 20.253 7.4 19.453 5.92c2.454.84 4.494 2.547 5.774 4.747zM16 5.387c1.107 1.6 1.973 3.373 2.547 5.28h-5.094c.574-1.907 1.44-3.68 2.547-5.28zM5.68 18.667c-.213-.854-.347-1.747-.347-2.667 0-.92.134-1.813.347-2.667h4.507C10.08 14.213 10 15.093 10 16c0 .907.08 1.787.187 2.667H5.68zm1.093 2.666h3.934c.426 1.667 1.04 3.267 1.84 4.747-2.454-.84-4.494-2.533-5.774-4.747zm3.934-10.666H6.773c1.28-2.214 3.32-3.907 5.774-4.747-.8 1.48-1.414 3.08-1.84 4.747zM16 26.613c-1.107-1.6-1.973-3.373-2.547-5.28h5.094c-.574 1.907-1.44 3.68-2.547 5.28zm3.12-7.946h-6.24c-.12-.88-.213-1.76-.213-2.667 0-.907.093-1.8.213-2.667h6.24c.12.867.213 1.76.213 2.667 0 .907-.093 1.787-.213 2.667zm.333 7.413c.8-1.48 1.414-3.08 1.84-4.747h3.934c-1.28 2.2-3.32 3.907-5.774 4.747zm2.36-7.413c.107-.88.187-1.76.187-2.667 0-.907-.08-1.787-.187-2.667h4.507c.213.854.347 1.747.347 2.667 0 .92-.134 1.813-.347 2.667h-4.507z"></path>
+      </g>
+      <g id="timezone" fill-rule="evenodd">
+        <path d="M15.993 2.667C8.627 2.667 2.667 8.633 2.667 16s5.96 13.333 13.326 13.333c7.367 0 13.34-5.966 13.34-13.333S23.36 2.667 15.993 2.667zm.007 24c-5.893 0-10.667-4.774-10.667-10.667S10.107 5.333 16 5.333 26.667 10.107 26.667 16 21.893 26.667 16 26.667z"></path>
+        <path d="M16.667 9.333h-2v8l6.993 4.2 1.007-1.64-6-3.56"></path>
+      </g>
+      <g id="wifi" fill-rule="evenodd">
+        <path d="M1.333 12L4 14.667c6.627-6.627 17.373-6.627 24 0L30.667 12c-8.1-8.1-21.234-8.1-29.334 0zM12 22.667l4 4 4-4c-2.207-2.207-5.793-2.207-8 0zm-5.333-5.334L9.333 20c3.68-3.68 9.654-3.68 13.334 0l2.666-2.667c-5.153-5.153-13.513-5.153-18.666 0z"></path>
+      </g>
+
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
 <iron-iconset-svg name="oobe-welcome-64" size="64">
   <svg>
     <defs>
-      <g id="timezone" fill="none" fill-rule="evenodd">
-        <path d="M0 0h64v64H0"></path>
-        <path d="M31.987 5.333C17.253 5.333 5.333 17.267 5.333 32c0 14.733 11.92 26.667 26.654 26.667 14.733 0 26.68-11.934 26.68-26.667 0-14.733-11.947-26.667-26.68-26.667zm.013 48c-11.787 0-21.333-9.546-21.333-21.333 0-11.787 9.546-21.333 21.333-21.333 11.787 0 21.333 9.546 21.333 21.333 0 11.787-9.546 21.333-21.333 21.333z" fill="#5A5A5A"></path>
-        <path fill="#5A5A5A" d="M33.333 18.667h-4v16l13.987 8.4 2.013-3.28-12-7.12"></path>
+      <g id="accessibility" fill-rule="evenodd">
+        <path d="M32 5.333c2.933 0 5.333 2.415 5.333 5.367 0 2.95-2.4 5.366-5.333 5.366-2.933 0-5.333-2.415-5.333-5.366 0-2.952 2.4-5.367 5.333-5.367zM40 24v35h-5V43h-6v16.006h-5V24H8v-4.915h48V24H40z"></path>
+      </g>
+      <g id="language" fill-rule="evenodd">
+        <text font-family="RobotoMono-Regular, Roboto Mono" font-size="20" transform="translate(0 -71)">
+          <tspan x="1" y="19">Language</tspan>
+        </text>
+        <path d="M31.973 5.333C17.253 5.333 5.333 17.28 5.333 32c0 14.72 11.92 26.667 26.64 26.667C46.72 58.667 58.667 46.72 58.667 32c0-14.72-11.947-26.667-26.694-26.667zm18.48 16h-7.866c-.854-3.333-2.08-6.533-3.68-9.493 4.906 1.68 8.986 5.093 11.546 9.493zM32 10.773c2.213 3.2 3.947 6.747 5.093 10.56H26.907c1.146-3.813 2.88-7.36 5.093-10.56zm-20.64 26.56c-.427-1.706-.693-3.493-.693-5.333 0-1.84.266-3.627.693-5.333h9.013C20.16 28.427 20 30.187 20 32c0 1.813.16 3.573.373 5.333H11.36zm2.187 5.334h7.866c.854 3.333 2.08 6.533 3.68 9.493-4.906-1.68-8.986-5.067-11.546-9.493zm7.866-21.334h-7.866c2.56-4.426 6.64-7.813 11.546-9.493-1.6 2.96-2.826 6.16-3.68 9.493zM32 53.227c-2.213-3.2-3.947-6.747-5.093-10.56h10.186c-1.146 3.813-2.88 7.36-5.093 10.56zm6.24-15.894H25.76c-.24-1.76-.427-3.52-.427-5.333 0-1.813.187-3.6.427-5.333h12.48c.24 1.733.427 3.52.427 5.333 0 1.813-.187 3.573-.427 5.333zm.667 14.827c1.6-2.96 2.826-6.16 3.68-9.493h7.866c-2.56 4.4-6.64 7.813-11.546 9.493zm4.72-14.827c.213-1.76.373-3.52.373-5.333 0-1.813-.16-3.573-.373-5.333h9.013c.427 1.706.693 3.493.693 5.333 0 1.84-.266 3.627-.693 5.333h-9.013z"></path>
+      </g>
+      <g id="timezone" fill-rule="evenodd">
+        <path d="M31.987 5.333C17.253 5.333 5.333 17.267 5.333 32c0 14.733 11.92 26.667 26.654 26.667 14.733 0 26.68-11.934 26.68-26.667 0-14.733-11.947-26.667-26.68-26.667zm.013 48c-11.787 0-21.333-9.546-21.333-21.333 0-11.787 9.546-21.333 21.333-21.333 11.787 0 21.333 9.546 21.333 21.333 0 11.787-9.546 21.333-21.333 21.333z"></path>
+        <path d="M33.333 18.667h-4v16l13.987 8.4 2.013-3.28-12-7.12"></path>
+      </g>
+      <g id="wifi" fill-rule="evenodd">
+        <path d="M2.667 24L8 29.333c13.253-13.253 34.747-13.253 48 0L61.333 24C45.133 7.8 18.867 7.8 2.667 24zM24 45.333l8 8 8-8c-4.413-4.413-11.587-4.413-16 0zM13.333 34.667L18.667 40c7.36-7.36 19.306-7.36 26.666 0l5.334-5.333c-10.307-10.307-27.027-10.307-37.334 0z"></path>
       </g>
     </defs>
   </svg>
 </iron-iconset-svg>
 
 <dom-module id="oobe-welcome-md">
   <template>
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_welcome.css">
     <link rel="stylesheet" href="oobe_dialog_parameters.css">
     <oobe-welcome-dialog id="welcomeScreen" role="dialog"
         i18n-values="aria-label:networkScreenGreeting"
         current-language="[[currentLanguage]]"
         on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
         on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
         on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"
         on-next-button-clicked="onWelcomeNextButtonClicked_"
         timezone-button-visible="[[isTimezoneButtonVisible_(highlightStrength)]]"
         debugging-link-visible="[[debuggingLinkVisible]]"
         >
     </oobe-welcome-dialog>
     <oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
         i18n-values="aria-label:languageSectionTitle">
-      <iron-icon icon="icons:language" class="oobe-icon"></iron-icon>
+      <iron-icon icon="oobe-welcome-32:language" class="oobe-icon oobe-icon-1x">

[jdufault, 2017/03/14 17:48:55]

What about making a <hd-iron-icon> (needs a better name) that wraps the logic
here?

  <hd-iron-icon icon="oobe-welcome:language" class="oobe-icon"></hd-iron-icon>

This then picks the correct 1x or 2x asset as needed.

[Alexander Alekseev, 2017/03/15 06:44:23]

Done.

+      </iron-icon>
+      <iron-icon icon="oobe-welcome-64:language" class="oobe-icon oobe-icon-2x">
+      </iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="languageSectionTitle"></h1>
       </div>
       <div class="footer layout vertical">
         <template is="dom-if" if="[[enabled]]">
           <div id="languageDropdownContainer"
               class="flex layout horizontal justified language-selection-entry">
             <div class="language-selection-title layout vertical center-justified"
                 i18n-content="languageDropdownTitle">
             </div>
@@ skipping 16 matching lines @@
         </template>
       </div>
       <div class="bottom-buttons layout horizontal end-justified">
         <oobe-text-button inverse on-tap="closeLanguageSection_">
           <div i18n-content="oobeOKButtonText"></div>
         </oobe-text-button>
       </div>
     </oobe-dialog>
     <oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons
         i18n-values="aria-label:accessibilitySectionTitle">
-      <iron-icon icon="icons:accessibility" class="oobe-icon"></iron-icon>
+      <iron-icon icon="oobe-welcome-32:accessibility"
+          class="oobe-icon oobe-icon-1x">
+      </iron-icon>
+      <iron-icon icon="oobe-welcome-64:accessibility"
+          class="oobe-icon oobe-icon-2x">
+      </iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="accessibilitySectionTitle"></h1>
         <div class="subtitle" i18n-content="accessibilitySectionHint"></div>
       </div>
       <div class="footer layout vertical">
         <oobe-a11y-option checked="[[a11yStatus.spokenFeedbackEnabled]]"
             on-change="onA11yOptionChanged_"
             chrome-message="enableSpokenFeedback"
             i18n-values="label-for-aria:spokenFeedbackOption"
             class="focus-on-show">
@@ skipping 45 matching lines @@
         </oobe-a11y-option>
       </div>
       <div class="bottom-buttons layout horizontal end-justified">
         <oobe-text-button inverse on-tap="closeAccessibilitySection_">
           <div i18n-content="oobeOKButtonText"></div>
         </oobe-text-button>
       </div>
     </oobe-dialog>
     <oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons
         i18n-values="aria-label:timezoneSectionTitle">
-      <iron-icon icon="oobe-welcome-64:timezone" class="oobe-icon"></iron-icon>
+      <iron-icon icon="oobe-welcome-32:timezone" class="oobe-icon oobe-icon-1x">
+      </iron-icon>
+      <iron-icon icon="oobe-welcome-64:timezone" class="oobe-icon oobe-icon-2x">
+      </iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="timezoneSectionTitle"></h1>
       </div>
       <div class="footer layout vertical">
         <div class="flex layout horizontal justified timezone-selection-entry">
           <div class="timezone-selection-title layout vertical center-justified"
               i18n-content="timezoneDropdownTitle">
           </div>
           <oobe-i18n-dropdown id="timezoneSelect" items="[[timezones]]"
               on-select-item="onTimezoneSelected_"
               i18n-values="label-for-aria:timezoneDropdownLabel"
               class="focus-on-show">
           </oobe-i18n-dropdown>
         </div>
       </div>
       <div class="bottom-buttons layout horizontal end-justified">
         <oobe-text-button inverse on-tap="closeTimezoneSection_">
           <div i18n-content="oobeOKButtonText"></div>
         </oobe-text-button>
       </div>
     </oobe-dialog>
     <oobe-dialog id="networkSelectionScreen" role="dialog" hidden has-buttons
         i18n-values="aria-label:networkSectionTitle"
         on-show-dialog="onNetworkSelectionScreenShown_">
-      <iron-icon icon="oobe-welcome:wifi" class="oobe-icon"></iron-icon>
+      <iron-icon icon="oobe-welcome-32:wifi" class="oobe-icon oobe-icon-1x">
+      </iron-icon>
+      <iron-icon icon="oobe-welcome-64:wifi" class="oobe-icon oobe-icon-2x">
+      </iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="networkSectionTitle"></h1>
         <div class="subtitle" i18n-content="networkSectionHint"></div>
       </div>
       <div class="footer layout vertical">
         <cr-network-select id="networkSelect"
             on-default-network-changed="onDefaultNetworkChanged_"
             on-network-item-selected="onNetworkListNetworkItemSelected_"
             on-custom-item-selected="onNetworkListCustomItemSelected_"
             custom-items="[[getNetworkCustomItems_()]]"
             no-bottom-scroll-border
             class="focus-on-show">
         </cr-network-select>
       </div>
       <div class="bottom-buttons layout horizontal justified">
         <oobe-back-button on-tap="onNetworkSelectionBackButtonPressed_">
         </oobe-back-button>
         <oobe-next-button disabled="[[!isConnected_]]"
             on-tap="onSelectedNetworkConnected_">
         </oobe-next-button>
       </div>
     </oobe-dialog>
   </template>
 </dom-module>