Add down icon to cr_searchable_dropdown

The down icon changes colour to match the underline when the input
is focused.

BUG=987947,977313

Change-Id: I82e3c277493209633905b8836346e9c69e27d7eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1774000Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Commit-Queue: Anand Mistry <amistry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#692403}

ui/webui/resources/cr_elements/cr_searchable_drop_down/BUILD.gn

@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
 js_library("cr_searchable_drop_down") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/iron-dropdown:iron-dropdown-extracted",
+    "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
     "//third_party/polymer/v1_0/components-chromium/paper-progress:paper-progress-extracted",
     "//ui/webui/resources/cr_elements/cr_input:cr_input",
   ]

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

@@ -2,8 +2,10 @@
 
 <link rel="import" href="../cr_input/cr_input.html">
 <link rel="import" href="../cr_scrollable_behavior.html">
+<link rel="import" href="../icons.html">
 <link rel="import" href="../shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 
 <dom-module id="cr-searchable-drop-down">
@@ -41,6 +43,25 @@
         width: 100%;
       }
 
+      #dropdown-icon {
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+        margin-top: -10px;
+        padding-inline-end: 6px;
+        position: absolute;
+        right: 0;
+        top: 50%;
+      }
+
+      :host-context([dir='rtl']) #dropdown-icon {
+        left: 0;
+        right: unset;
+      }
+
+      cr-input:focus-within #dropdown-icon {
+        --iron-icon-fill-color: var(--google-blue-600);
+      }
+
       #input-box {
         height: 100%;
         left: 0;
@@ -95,6 +116,7 @@
         invalid="[[shouldShowErrorMessage_(errorMessage, errorMessageAllowed)]]">
       <div id="input-overlay" slot="suffix">
         <div id="input-box">
+          <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
           <paper-progress id="loading" indeterminate hidden="[[!showLoading]]">
           </paper-progress>
         </div>