OOBE - Polymer3 migration preparations - SVGs

- Move svg iconset out of hid screen and properly use the
  larger icons by leveraging hd-iron-icon.
- Add build directives to modularize oobe-network-icons.
- Remove svg iconset in oobe-welcome that was not being used.
- Move svg iconset out of welcome-dialog.
- Move svg iconset out of notification-card.

Bug: 1184731
Change-Id: I61805a4eb52eb6c1738bf13c0dbde57e59bc07c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3151837
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Renato Silva <rrsilva@google.com>
Cr-Commit-Position: refs/heads/main@{#920246}
diff --git a/chrome/browser/resources/chromeos/login/components/BUILD.gn b/chrome/browser/resources/chromeos/login/components/BUILD.gn
index 685242c..3dbbea7c 100644
--- a/chrome/browser/resources/chromeos/login/components/BUILD.gn
+++ b/chrome/browser/resources/chromeos/login/components/BUILD.gn
@@ -45,6 +45,7 @@
     ":display_manager_types.m",
     ":hd_iron_icon.m",
     ":oobe_icons.m",
+    ":oobe_network_icons.m",
     ":oobe_types.m",
   ]
 }
@@ -60,6 +61,7 @@
     # Local targets
     ":hd_iron_icon_module",
     ":oobe_icons_module",
+    ":oobe_network_icons_module",
     ":modulize",
   ]
 }
@@ -140,6 +142,12 @@
   extra_deps = [ ":oobe_icons_module" ]
 }
 
+js_library("oobe_network_icons.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/oobe_network_icons.m.js" ]
+  deps = []
+  extra_deps = [ ":oobe_network_icons_module" ]
+}
+
 js_library("oobe_types.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/components/oobe_types.m.js" ]
   deps = []
@@ -158,6 +166,12 @@
   html_type = "iron-iconset"
 }
 
+polymer_modulizer("oobe_network_icons") {
+  js_file = "oobe_network_icons.m.js"
+  html_file = "oobe_network_icons.html"
+  html_type = "iron-iconset"
+}
+
 js_modulizer("modulize") {
   input_files = [
     "display_manager_types.js",
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_icons.html b/chrome/browser/resources/chromeos/login/components/oobe_icons.html
index 4bba3a0..dd67bd9 100644
--- a/chrome/browser/resources/chromeos/login/components/oobe_icons.html
+++ b/chrome/browser/resources/chromeos/login/components/oobe_icons.html
@@ -12,6 +12,46 @@
         <path d="M6.66669 13.825L10.7872 10L6.66669 6.175L7.93524 5L13.3334 10L7.93524 15L6.66669 13.825Z">
         </path>
       </g>
+      <g id="hid-touchscreen" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.288C4 8.343 5.22 10.125 7 11v1.071c-1.166-.379-2.162-.571-3-.571a1 1 0 00-.832.445l-1 1.5a1 1 0 00.08 1.213l3.5 4A1 1 0 006.5 19h7a1 1 0 00.894-.553l2.5-5A.999.999 0 0017 13c0-.734-.408-1.244-1.257-1.911a91.893 91.893 0 00-1.999-1.437A5.145 5.145 0 0015 6.288C15 3.368 12.538 1 9.5 1S4 3.368 4 6.288zm8 2.356V6.5a2.5 2.5 0 00-5 0V11 8.644a3.29 3.29 0 01-1-2.356C6 4.43 7.567 2.923 9.5 2.923S13 4.43 13 6.288a3.29 3.29 0 01-1 2.356zM9 13.5a1 1 0 01-1.371.928c-1.269-.507-2.312-.803-3.115-.896l-.257.386L6.954 17h5.928l2.006-4.012a4.803 4.803 0 00-.38-.327c-.285-.223-1.718-1.235-2.323-1.661H10V6.5a.5.5 0 00-1 0v7z" fill="#5F6368">
+        </path>
+      </g>
+      <g id="hid-mouse" fill="none" fill-rule="evenodd">
+        <path d="M0 0h20v20H0"></path>
+        <path d="M10.833.892V7.5h5.834c0-3.4-2.546-6.2-5.834-6.608zM3.333 12.5c0 3.683 2.984 6.667 6.667 6.667s6.667-2.984 6.667-6.667V9.167H3.333V12.5zM9.167.892C5.88 1.3 3.333 4.1 3.333 7.5h5.834V.892z" fill="#5A5A5A">
+        </path>
+      </g>
+      <g id="hid-keyboard" fill="none" fill-rule="evenodd">
+        <path d="M16.667 4.167H3.333c-.92 0-1.658.745-1.658 1.666l-.008 8.334c0 .92.746 1.666 1.666 1.666h13.334c.92 0 1.666-.745 1.666-1.666V5.833c0-.92-.745-1.666-1.666-1.666zm-7.5 2.5h1.666v1.666H9.167V6.667zm0 2.5h1.666v1.666H9.167V9.167zm-2.5-2.5h1.666v1.666H6.667V6.667zm0 2.5h1.666v1.666H6.667V9.167zm-.834 1.666H4.167V9.167h1.666v1.666zm0-2.5H4.167V6.667h1.666v1.666zm7.5 5.834H6.667V12.5h6.666v1.667zm0-3.334h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666zm2.5 2.5h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666z" fill="#5A5A5A">
+        </path>
+        <path d="M0 0h20v20H0V0zm0 0h20v20H0V0z" fill="#D8D8D8">
+        </path>
+      </g>
+      <g id="welcome-accessibility" fill-rule="evenodd">
+        <defs>
+          <path id="a" d="M17.556 4.6c-2.32.63-5.04.9-7.556.9s-5.236-.27-7.556-.9L2 6.4c1.653.45 3.722.747 5.5.9V19H9v-5.5h2V19h1.5V7.3c1.778-.153 3.847-.45 5.5-.9l-.444-1.8zM10 4.6c.978 0 1.778-.81 1.778-1.8S10.978 1 10 1s-1.778.81-1.778 1.8.8 1.8 1.778 1.8z">
+          </path>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <path d="M0 0h20v20H0z"></path>
+          <use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
+        </g>
+      </g>
+      <g id="welcome-language" fill="none" fill-rule="evenodd">
+        <path d="M0 0h20v20H0z"></path>
+        <path fill="#1A73E8" fill-rule="nonzero" d="M9.992 2C5.576 2 2 5.584 2 10s3.576 8 7.992 8C14.416 18 18 14.416 18 10s-3.584-8-8.008-8zm5.544 4.8h-2.36c-.256-1-.624-1.96-1.104-2.848A6.424 6.424 0 0 1 15.536 6.8zM10 3.632A11.27 11.27 0 0 1 11.528 6.8H8.472A11.27 11.27 0 0 1 10 3.632zM3.808 11.6A6.594 6.594 0 0 1 3.6 10c0-.552.08-1.088.208-1.6h2.704A13.212 13.212 0 0 0 6.4 10c0 .544.048 1.072.112 1.6H3.808zm.656 1.6h2.36c.256 1 .624 1.96 1.104 2.848A6.39 6.39 0 0 1 4.464 13.2zm2.36-6.4h-2.36a6.39 6.39 0 0 1 3.464-2.848A12.52 12.52 0 0 0 6.824 6.8zM10 16.368A11.27 11.27 0 0 1 8.472 13.2h3.056A11.27 11.27 0 0 1 10 16.368zm1.872-4.768H8.128A11.77 11.77 0 0 1 8 10c0-.544.056-1.08.128-1.6h3.744c.072.52.128 1.056.128 1.6s-.056 1.072-.128 1.6zm.2 4.448a12.52 12.52 0 0 0 1.104-2.848h2.36a6.424 6.424 0 0 1-3.464 2.848zm1.416-4.448c.064-.528.112-1.056.112-1.6s-.048-1.072-.112-1.6h2.704c.128.512.208 1.048.208 1.6s-.08 1.088-.208 1.6h-2.704z">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
+<iron-iconset-svg name="oobe-24" size="20">
+  <svg>
+    <defs>
+      <g id="done">
+        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
+      </g>
     </defs>
   </svg>
 </iron-iconset-svg>
@@ -154,6 +194,43 @@
   </svg>
 </iron-iconset-svg>
 
+<iron-iconset-svg name="oobe-40" size="40">
+  <svg>
+    <defs>
+      <g id="welcome-accessibility" fill-rule="evenodd">
+        <defs>
+          <path id="a" d="M35.111 9.2C30.471 10.46 25.031 11 20 11c-5.031 0-10.471-.54-15.111-1.8L4 12.8c3.307.9 7.444 1.494 11 1.8V38h3V27h4v11h3V14.6c3.556-.306 7.693-.9 11-1.8l-.889-3.6zM20 9.2c1.956 0 3.556-1.62 3.556-3.6S21.956 2 20 2s-3.556 1.62-3.556 3.6 1.6 3.6 3.556 3.6z">
+          </path>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <path d="M0 0h40v40H0z"></path>
+          <use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
+        </g>
+      </g>
+      <g id="hid-touchscreen" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8 12.577c0 4.11 2.438 7.672 6 9.423v2.143C11.669 23.384 9.676 23 8 23a2 2 0 00-1.664.89l-2 3a2 2 0 00.159 2.427l7 8A2 2 0 0013 38h14a2 2 0 001.789-1.106l5-10A2 2 0 0034 26c0-1.468-.816-2.489-2.514-3.823-.524-.411-2.594-1.881-3.998-2.873C29.058 17.476 30 15.132 30 12.577 30 6.735 25.075 2 19 2S8 6.735 8 12.577zm16 4.71V13a5 5 0 00-10 0v9-4.713c-1.237-1.214-2-2.876-2-4.71 0-3.718 3.134-6.73 7-6.73 3.866-.001 7 3.012 7 6.73 0 1.834-.763 3.496-2 4.71zM18 27a2 2 0 01-2.743 1.857c-2.536-1.015-4.624-1.607-6.23-1.793l-.514.771L13.908 34h11.856l4.012-8.025a9.567 9.567 0 00-.762-.652c-.568-.447-3.435-2.472-4.645-3.323h-4.37L20 13a1 1 0 00-2 0v14z" fill="#5F6368">
+        </path>
+      </g>
+      <g id="hid-mouse" fill="none" fill-rule="evenodd">
+        <path d="M0 0h40v40H0"></path>
+        <path d="M21 1.783V15h11.667c0-6.8-5.092-12.4-11.667-13.217zm-1 35.55c7.183 0 13-5.966 13-13.333v-7H7v7c0 7.367 5.818 13.333 13 13.333zM19 1.78C12.237 2.597 7 8.198 7 15h12V1.78z" fill="#5A5A5A">
+        </path>
+      </g>
+      <g id="hid-keyboard" fill="none" fill-rule="evenodd">
+        <path d="M33.333 8.333H6.667c-1.842 0-3.317 1.492-3.317 3.334l-.017 16.666c0 1.842 1.492 3.334 3.334 3.334h26.666c1.842 0 3.334-1.492 3.334-3.334V11.667c0-1.842-1.492-3.334-3.334-3.334zm-15 5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-5-5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-1.666 3.334H8.333v-3.334h3.334v3.334zm0-5H8.333v-3.334h3.334v3.334zm15 11.666H13.333V25h13.334v3.333zm0-6.666h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334zm5 5h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334z" fill="#5A5A5A">
+        </path>
+        <path d="M0 0h40v40H0V0zm0 0h40v40H0V0z" fill="#D8D8D8">
+        </path>
+      </g>
+      <g id="welcome-language" fill="none" fill-rule="evenodd">
+        <path d="M0 0h40v40H0z"></path>
+        <path fill="#1A73E8" fill-rule="nonzero" d="M19.984 4C11.152 4 4 11.168 4 20s7.152 16 15.984 16C28.832 36 36 28.832 36 20S28.832 4 19.984 4zm11.088 9.6h-4.72c-.512-2-1.248-3.92-2.208-5.696a12.847 12.847 0 0 1 6.928 5.696zM20 7.264a22.539 22.539 0 0 1 3.056 6.336h-6.112A22.539 22.539 0 0 1 20 7.264zM7.616 23.2A13.187 13.187 0 0 1 7.2 20c0-1.104.16-2.176.416-3.2h5.408c-.128 1.056-.224 2.112-.224 3.2s.096 2.144.224 3.2H7.616zm1.312 3.2h4.72c.512 2 1.248 3.92 2.208 5.696A12.779 12.779 0 0 1 8.928 26.4zm4.72-12.8h-4.72a12.779 12.779 0 0 1 6.928-5.696 25.039 25.039 0 0 0-2.208 5.696zM20 32.736a22.539 22.539 0 0 1-3.056-6.336h6.112A22.539 22.539 0 0 1 20 32.736zm3.744-9.536h-7.488C16.112 22.144 16 21.088 16 20s.112-2.16.256-3.2h7.488c.144 1.04.256 2.112.256 3.2s-.112 2.144-.256 3.2zm.4 8.896a25.039 25.039 0 0 0 2.208-5.696h4.72a12.847 12.847 0 0 1-6.928 5.696zm2.832-8.896c.128-1.056.224-2.112.224-3.2s-.096-2.144-.224-3.2h5.408c.256 1.024.416 2.096.416 3.2s-.16 2.176-.416 3.2h-5.408z">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
 <iron-iconset-svg name="oobe-48" size="48">
   <svg>
     <defs>
diff --git a/chrome/browser/resources/chromeos/login/notification_card.html b/chrome/browser/resources/chromeos/login/notification_card.html
index 57f59bc..dd357a2 100644
--- a/chrome/browser/resources/chromeos/login/notification_card.html
+++ b/chrome/browser/resources/chromeos/login/notification_card.html
@@ -7,20 +7,11 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/action_link.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">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
+<link rel="import" href="/components/oobe_icons.html">
 <link rel="import" href="/components/common_styles/common_styles.html">
 
-<iron-iconset-svg name="notification-card" size="24">
-  <svg>
-    <defs>
-      <g id="done">
-        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
 <!--
   A simple notification card with a button, link (optional) and icon (optional).
   Example:
diff --git a/chrome/browser/resources/chromeos/login/notification_card.js b/chrome/browser/resources/chromeos/login/notification_card.js
index bf06c26..9999ca5 100644
--- a/chrome/browser/resources/chromeos/login/notification_card.js
+++ b/chrome/browser/resources/chromeos/login/notification_card.js
@@ -27,7 +27,7 @@
     if (type == NotificationCardType.FAIL)
       return 'cr:warning';
     if (type == NotificationCardType.SUCCESS)
-      return 'notification-card:done';
+      return 'oobe-24:done';
     console.error('Unknown type "' + type + '".');
     return '';
   },
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.html b/chrome/browser/resources/chromeos/login/oobe_welcome.html
index 2e03191f..271bcd96b 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.html
@@ -8,8 +8,8 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.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">
 
+<link rel="import" href="/components/oobe_icons.html">
 <link rel="import" href="/components/behaviors/login_screen_behavior.html">
 <link rel="import" href="/components/behaviors/multi_step_behavior.html">
 <link rel="import" href="/components/behaviors/oobe_i18n_behavior.html">
@@ -19,27 +19,6 @@
 <link rel="import" href="/components/dialogs/oobe_adaptive_dialog.html">
 <link rel="import" href="/components/dialogs/oobe_modal_dialog.html">
 
-<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="settings" fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"></path>
-        <path d="M25.907 17.3c.053-.427.093-.86.093-1.3 0-.44-.04-.873-.093-1.3l2.82-2.207c.253-.2.326-.56.16-.853L26.22 7.02a.66.66 0 0 0-.813-.287l-3.32 1.34a10.117 10.117 0 0 0-2.254-1.313l-.5-3.533a.686.686 0 0 0-.666-.56h-5.334a.673.673 0 0 0-.66.56l-.5 3.533c-.813.34-1.566.78-2.253 1.313L6.6 6.733a.667.667 0 0 0-.813.287L3.12 11.64a.668.668 0 0 0 .16.853L6.093 14.7C6.04 15.127 6 15.56 6 16c0 .44.04.873.093 1.3L3.28 19.507a.665.665 0 0 0-.16.853l2.667 4.62c.166.287.513.407.813.287l3.32-1.34c.687.526 1.44.973 2.253 1.313l.5 3.533c.054.314.327.56.66.56h5.334a.673.673 0 0 0 .66-.56l.5-3.533a9.867 9.867 0 0 0 2.253-1.313l3.32 1.34c.3.113.647 0 .813-.287l2.667-4.62a.668.668 0 0 0-.16-.853L25.907 17.3zM16 20.667A4.663 4.663 0 0 1 11.333 16 4.663 4.663 0 0 1 16 11.333 4.663 4.663 0 0 1 20.667 16 4.663 4.663 0 0 1 16 20.667z" fill="#4285F4" fill-rule="nonzero"></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>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
 <dom-module id="oobe-welcome-element">
   <template>
     <style include="oobe-dialog-host-styles">
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html b/chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html
index 2013682..265a62d 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html
@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
 
+<link rel="import" href="/components/oobe_icons.html">
 <link rel="import" href="/components/behaviors/oobe_i18n_behavior.html">
 <link rel="import" href="/components/buttons/oobe_icon_button.html">
 <link rel="import" href="/components/buttons/oobe_next_button.html">
@@ -20,50 +21,6 @@
   OOBE Welcome screen
 -->
 
-<iron-iconset-svg name="oobe-welcome-dialog-20" size="20">
-  <svg>
-    <defs>
-      <g id="accessibility" fill-rule="evenodd">
-        <defs>
-          <path id="a" d="M17.556 4.6c-2.32.63-5.04.9-7.556.9s-5.236-.27-7.556-.9L2 6.4c1.653.45 3.722.747 5.5.9V19H9v-5.5h2V19h1.5V7.3c1.778-.153 3.847-.45 5.5-.9l-.444-1.8zM10 4.6c.978 0 1.778-.81 1.778-1.8S10.978 1 10 1s-1.778.81-1.778 1.8.8 1.8 1.778 1.8z">
-          </path>
-        </defs>
-        <g fill="none" fill-rule="evenodd">
-          <path d="M0 0h20v20H0z"></path>
-          <use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
-        </g>
-      </g>
-      <g id="language" fill="none" fill-rule="evenodd">
-        <path d="M0 0h20v20H0z"></path>
-        <path fill="#1A73E8" fill-rule="nonzero" d="M9.992 2C5.576 2 2 5.584 2 10s3.576 8 7.992 8C14.416 18 18 14.416 18 10s-3.584-8-8.008-8zm5.544 4.8h-2.36c-.256-1-.624-1.96-1.104-2.848A6.424 6.424 0 0 1 15.536 6.8zM10 3.632A11.27 11.27 0 0 1 11.528 6.8H8.472A11.27 11.27 0 0 1 10 3.632zM3.808 11.6A6.594 6.594 0 0 1 3.6 10c0-.552.08-1.088.208-1.6h2.704A13.212 13.212 0 0 0 6.4 10c0 .544.048 1.072.112 1.6H3.808zm.656 1.6h2.36c.256 1 .624 1.96 1.104 2.848A6.39 6.39 0 0 1 4.464 13.2zm2.36-6.4h-2.36a6.39 6.39 0 0 1 3.464-2.848A12.52 12.52 0 0 0 6.824 6.8zM10 16.368A11.27 11.27 0 0 1 8.472 13.2h3.056A11.27 11.27 0 0 1 10 16.368zm1.872-4.768H8.128A11.77 11.77 0 0 1 8 10c0-.544.056-1.08.128-1.6h3.744c.072.52.128 1.056.128 1.6s-.056 1.072-.128 1.6zm.2 4.448a12.52 12.52 0 0 0 1.104-2.848h2.36a6.424 6.424 0 0 1-3.464 2.848zm1.416-4.448c.064-.528.112-1.056.112-1.6s-.048-1.072-.112-1.6h2.704c.128.512.208 1.048.208 1.6s-.08 1.088-.208 1.6h-2.704z">
-        </path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
-<iron-iconset-svg name="oobe-welcome-dialog-40" size="40">
-  <svg>
-    <defs>
-      <g id="accessibility" fill-rule="evenodd">
-        <defs>
-          <path id="a" d="M35.111 9.2C30.471 10.46 25.031 11 20 11c-5.031 0-10.471-.54-15.111-1.8L4 12.8c3.307.9 7.444 1.494 11 1.8V38h3V27h4v11h3V14.6c3.556-.306 7.693-.9 11-1.8l-.889-3.6zM20 9.2c1.956 0 3.556-1.62 3.556-3.6S21.956 2 20 2s-3.556 1.62-3.556 3.6 1.6 3.6 3.556 3.6z">
-          </path>
-        </defs>
-        <g fill="none" fill-rule="evenodd">
-          <path d="M0 0h40v40H0z"></path>
-          <use fill="#1A73E8" fill-rule="nonzero" xlink:href="#a"></use>
-        </g>
-      </g>
-      <g id="language" fill="none" fill-rule="evenodd">
-        <path d="M0 0h40v40H0z"></path>
-        <path fill="#1A73E8" fill-rule="nonzero" d="M19.984 4C11.152 4 4 11.168 4 20s7.152 16 15.984 16C28.832 36 36 28.832 36 20S28.832 4 19.984 4zm11.088 9.6h-4.72c-.512-2-1.248-3.92-2.208-5.696a12.847 12.847 0 0 1 6.928 5.696zM20 7.264a22.539 22.539 0 0 1 3.056 6.336h-6.112A22.539 22.539 0 0 1 20 7.264zM7.616 23.2A13.187 13.187 0 0 1 7.2 20c0-1.104.16-2.176.416-3.2h5.408c-.128 1.056-.224 2.112-.224 3.2s.096 2.144.224 3.2H7.616zm1.312 3.2h4.72c.512 2 1.248 3.92 2.208 5.696A12.779 12.779 0 0 1 8.928 26.4zm4.72-12.8h-4.72a12.779 12.779 0 0 1 6.928-5.696 25.039 25.039 0 0 0-2.208 5.696zM20 32.736a22.539 22.539 0 0 1-3.056-6.336h6.112A22.539 22.539 0 0 1 20 32.736zm3.744-9.536h-7.488C16.112 22.144 16 21.088 16 20s.112-2.16.256-3.2h7.488c.144 1.04.256 2.112.256 3.2s-.112 2.144-.256 3.2zm.4 8.896a25.039 25.039 0 0 0 2.208-5.696h4.72a12.847 12.847 0 0 1-6.928 5.696zm2.832-8.896c.128-1.056.224-2.112.224-3.2s-.096-2.144-.224-3.2h5.408c.256 1.024.416 2.096.416 3.2s-.16 2.176-.416 3.2h-5.408z">
-        </path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
 <dom-module id="oobe-welcome-dialog">
   <template>
     <style include="cr-shared-style oobe-dialog-host-styles">
@@ -199,8 +156,8 @@
       <div id="content">
         <div id="buttons" class="layout vertical">
           <oobe-icon-button id="languageSelectionButton"
-              icon1x="oobe-welcome-dialog-20:language"
-              icon2x="oobe-welcome-dialog-40:language"
+              icon1x="oobe-20:welcome-language"
+              icon2x="oobe-40:welcome-language"
               on-click="onLanguageClicked_"
               label-for-aria="[[i18nDynamic(locale, 'languageButtonLabel',
                   currentLanguage)]]">
@@ -208,8 +165,8 @@
           </oobe-icon-button>
           <oobe-icon-button id="accessibilitySettingsButton"
               text-key="accessibilityLink"
-              icon1x="oobe-welcome-dialog-20:accessibility"
-              icon2x="oobe-welcome-dialog-40:accessibility"
+              icon1x="oobe-20:welcome-accessibility"
+              icon2x="oobe-40:welcome-accessibility"
               on-click="onAccessibilityClicked_">
           </oobe-icon-button>
           <oobe-icon-button id="timezoneSettingsButton"
diff --git a/chrome/browser/resources/chromeos/login/screens/oobe/hid_detection.html b/chrome/browser/resources/chromeos/login/screens/oobe/hid_detection.html
index 0cc0ba8..de14cfc 100644
--- a/chrome/browser/resources/chromeos/login/screens/oobe/hid_detection.html
+++ b/chrome/browser/resources/chromeos/login/screens/oobe/hid_detection.html
@@ -1,9 +1,9 @@
 <link rel="import" href="chrome://resources/html/polymer.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">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
+<link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_icons.html">
 <link rel="import" href="/components/behaviors/login_screen_behavior.html">
 <link rel="import" href="/components/behaviors/oobe_dialog_host_behavior.html">
 <link rel="import" href="/components/behaviors/oobe_i18n_behavior.html">
@@ -11,52 +11,7 @@
 <link rel="import" href="/components/common_styles/common_styles.html">
 <link rel="import" href="/components/common_styles/oobe_dialog_host_styles.html">
 <link rel="import" href="/components/dialogs/oobe_adaptive_dialog.html">
-<link rel="import" href="/components/dialogs/oobe_modal_dialog.html">
-
-<iron-iconset-svg name="oobe-hid-detection-20" size="20">
-  <svg>
-    <defs>
-      <g id="touchscreen" fill="none">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.288C4 8.343 5.22 10.125 7 11v1.071c-1.166-.379-2.162-.571-3-.571a1 1 0 00-.832.445l-1 1.5a1 1 0 00.08 1.213l3.5 4A1 1 0 006.5 19h7a1 1 0 00.894-.553l2.5-5A.999.999 0 0017 13c0-.734-.408-1.244-1.257-1.911a91.893 91.893 0 00-1.999-1.437A5.145 5.145 0 0015 6.288C15 3.368 12.538 1 9.5 1S4 3.368 4 6.288zm8 2.356V6.5a2.5 2.5 0 00-5 0V11 8.644a3.29 3.29 0 01-1-2.356C6 4.43 7.567 2.923 9.5 2.923S13 4.43 13 6.288a3.29 3.29 0 01-1 2.356zM9 13.5a1 1 0 01-1.371.928c-1.269-.507-2.312-.803-3.115-.896l-.257.386L6.954 17h5.928l2.006-4.012a4.803 4.803 0 00-.38-.327c-.285-.223-1.718-1.235-2.323-1.661H10V6.5a.5.5 0 00-1 0v7z" fill="#5F6368">
-        </path>
-      </g>
-      <g id="mouse" fill="none" fill-rule="evenodd">
-        <path d="M0 0h20v20H0"></path>
-        <path d="M10.833.892V7.5h5.834c0-3.4-2.546-6.2-5.834-6.608zM3.333 12.5c0 3.683 2.984 6.667 6.667 6.667s6.667-2.984 6.667-6.667V9.167H3.333V12.5zM9.167.892C5.88 1.3 3.333 4.1 3.333 7.5h5.834V.892z" fill="#5A5A5A">
-        </path>
-      </g>
-      <g id="keyboard" fill="none" fill-rule="evenodd">
-        <path d="M16.667 4.167H3.333c-.92 0-1.658.745-1.658 1.666l-.008 8.334c0 .92.746 1.666 1.666 1.666h13.334c.92 0 1.666-.745 1.666-1.666V5.833c0-.92-.745-1.666-1.666-1.666zm-7.5 2.5h1.666v1.666H9.167V6.667zm0 2.5h1.666v1.666H9.167V9.167zm-2.5-2.5h1.666v1.666H6.667V6.667zm0 2.5h1.666v1.666H6.667V9.167zm-.834 1.666H4.167V9.167h1.666v1.666zm0-2.5H4.167V6.667h1.666v1.666zm7.5 5.834H6.667V12.5h6.666v1.667zm0-3.334h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666zm2.5 2.5h-1.666V9.167h1.666v1.666zm0-2.5h-1.666V6.667h1.666v1.666z" fill="#5A5A5A">
-        </path>
-        <path d="M0 0h20v20H0V0zm0 0h20v20H0V0z" fill="#D8D8D8">
-        </path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
-<iron-iconset-svg name="oobe-hid-detection-40" size="40">
-  <svg>
-    <defs>
-      <g id="touchscreen" fill="none">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M8 12.577c0 4.11 2.438 7.672 6 9.423v2.143C11.669 23.384 9.676 23 8 23a2 2 0 00-1.664.89l-2 3a2 2 0 00.159 2.427l7 8A2 2 0 0013 38h14a2 2 0 001.789-1.106l5-10A2 2 0 0034 26c0-1.468-.816-2.489-2.514-3.823-.524-.411-2.594-1.881-3.998-2.873C29.058 17.476 30 15.132 30 12.577 30 6.735 25.075 2 19 2S8 6.735 8 12.577zm16 4.71V13a5 5 0 00-10 0v9-4.713c-1.237-1.214-2-2.876-2-4.71 0-3.718 3.134-6.73 7-6.73 3.866-.001 7 3.012 7 6.73 0 1.834-.763 3.496-2 4.71zM18 27a2 2 0 01-2.743 1.857c-2.536-1.015-4.624-1.607-6.23-1.793l-.514.771L13.908 34h11.856l4.012-8.025a9.567 9.567 0 00-.762-.652c-.568-.447-3.435-2.472-4.645-3.323h-4.37L20 13a1 1 0 00-2 0v14z" fill="#5F6368">
-        </path>
-      </g>
-      <g id="mouse" fill="none" fill-rule="evenodd">
-        <path d="M0 0h40v40H0"></path>
-        <path d="M21 1.783V15h11.667c0-6.8-5.092-12.4-11.667-13.217zm-1 35.55c7.183 0 13-5.966 13-13.333v-7H7v7c0 7.367 5.818 13.333 13 13.333zM19 1.78C12.237 2.597 7 8.198 7 15h12V1.78z" fill="#5A5A5A">
-        </path>
-      </g>
-      <g id="keyboard" fill="none" fill-rule="evenodd">
-        <path d="M33.333 8.333H6.667c-1.842 0-3.317 1.492-3.317 3.334l-.017 16.666c0 1.842 1.492 3.334 3.334 3.334h26.666c1.842 0 3.334-1.492 3.334-3.334V11.667c0-1.842-1.492-3.334-3.334-3.334zm-15 5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-5-5h3.334v3.334h-3.334v-3.334zm0 5h3.334v3.334h-3.334v-3.334zm-1.666 3.334H8.333v-3.334h3.334v3.334zm0-5H8.333v-3.334h3.334v3.334zm15 11.666H13.333V25h13.334v3.333zm0-6.666h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334zm5 5h-3.334v-3.334h3.334v3.334zm0-5h-3.334v-3.334h3.334v3.334z" fill="#5A5A5A">
-        </path>
-        <path d="M0 0h40v40H0V0zm0 0h40v40H0V0z" fill="#D8D8D8">
-        </path>
-      </g>
-    </defs>
-  </svg>
-</iron-iconset-svg>
-
+<link rel="import" href="/components/dialogs/oobe_modal_dialog.html">iron-iconset-svg
 <dom-module id="hid-detection-element">
   <template>
     <style include="oobe-dialog-host-styles">
@@ -126,9 +81,10 @@
             class="layout vertical justified hid-selection-entry"
             hidden="[[!touchscreenDetected_]]">
           <div id="hid-touchscreen-row" class="flex layout horizontal center">
-            <iron-icon id="touchscreen-icon" alt=""
-                icon="oobe-hid-detection-20:touchscreen">
-            </iron-icon>
+            <hd-iron-icon id="touchscreen-icon" alt=""
+                icon1x="oobe-20:hid-touchscreen"
+                icon2x="oobe-40:hid-touchscreen">
+            </hd-iron-icon>
             <img id="touchscreen-tick" alt=""
                 src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
             <div id="touchscreen-label" aria-live="polite">
@@ -138,9 +94,9 @@
         </div>
         <div class="layout vertical hid-selection-entry">
           <div id="hid-mouse-row" class="flex layout horizontal center">
-            <iron-icon id="mouse-icon" alt=""
-                icon="oobe-hid-detection-20:mouse">
-            </iron-icon>
+            <hd-iron-icon id="mouse-icon" alt=""
+                icon1x="oobe-20:hid-mouse" icon2x="oobe-40:hid-mouse">
+            </hd-iron-icon>
             <img id="mouse-tick" alt=""
                 hidden="[[!tickIsVisible_(mouseState_)]]"
                 src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">
@@ -155,9 +111,9 @@
         <div class="layout vertical hid-selection-entry">
           <div id="hid-keyboard-row" class="flex layout horizontal center"
               on-click="openPinDialog_">
-            <iron-icon id="keyboard-icon" alt=""
-                icon="oobe-hid-detection-20:keyboard">
-            </iron-icon>
+            <hd-iron-icon id="keyboard-icon" alt=""
+                icon1x="oobe-20:hid-keyboard" icon2x="oobe-40:hid-keyboard">
+            </hd-iron-icon>
             <img id="keyboard-tick" alt=""
                 hidden="[[!tickIsVisible_(keyboardState_)]]"
                 src="chrome://theme/IDR_BLUETOOTH_PAIRING_TICK">