Add Material Design icons for use in emoji_picker.

This change adds the iconset and required files and adds them to the chrome://emoji-picker page as an example of usage. Icons currently do not do anything.

Bug: 1156851
Change-Id: I88434cb6f8954272764da53c4e5163302a655d88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2595548Reviewed-by: John Palmer <jopalmer@chromium.org>
Reviewed-by: Keith Lee <keithlee@chromium.org>
Commit-Queue: Kenton Lam <kentonlam@google.com>
Cr-Commit-Position: refs/heads/master@{#840909}

chrome/browser/resources/chromeos/emoji_picker/BUILD.gn

@@ -10,6 +10,7 @@ import("//ui/webui/resources/tools/generate_grd.gni")
 component_js_files = [
   "emoji_picker.js",
   "emoji_group.js",
+  "icons.js",
 ]
 
 polymer_deps =
@@ -56,6 +57,7 @@ grit("resources") {
 js_library("emoji_picker") {
   deps = [
            ":types",
+           ":icons",
            ":emoji_group",
            "//ui/webui/resources/js:load_time_data.m",
            "//third_party/polymer/v3_0/components-chromium/iron-icon",
@@ -66,6 +68,11 @@ js_library("emoji_group") {
   deps = [ ":types" ] + polymer_deps
 }
 
+js_library("icons") {
+  deps = [ "//third_party/polymer/v3_0/components-chromium/iron-iconset-svg" ] +
+         polymer_deps
+}
+
 js_library("types") {
 }
 
@@ -74,6 +81,7 @@ js_type_check("closure_compile") {
   deps = [
     ":emoji_group",
     ":emoji_picker",
+    ":icons",
     ":types",
   ]
 }

chrome/browser/resources/chromeos/emoji_picker/emoji_picker.html

@@ -12,21 +12,22 @@
 
 <div class="emoji-picker">
 
-  <input 
-    id="search" class="w-100" 
+  <input
+    id="search" class="w-100"
     type="text" value="{{search::input}}"
   ></input>
 
   <div class="emoji-tabs">
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="image:tag-faces"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
-    <iron-icon icon="device:access-time"></iron-icon>
+    <iron-icon icon="emoji_picker:schedule"></iron-icon>
+    <iron-icon icon="emoji_picker:insert_emoticon"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_people"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_nature"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_food_beverage"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_transportation"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_events"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_objects"></iron-icon>
+    <iron-icon icon="emoji_picker:emoji_symbols"></iron-icon>
+    <iron-icon icon="emoji_picker:flag"></iron-icon>
   </div>
 
   <div class="emoji-groups w-100">

chrome/browser/resources/chromeos/emoji_picker/emoji_picker.js

@@ -4,6 +4,7 @@
 
 import './strings.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './icons.js';
 import './emoji_group.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';

chrome/browser/resources/chromeos/emoji_picker/icons.html

+<iron-iconset-svg name="emoji_picker" size="24">
+  <defs>
+    <!--
+      These icons are copied from Material Design's icons and kept in sorted order.
+      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
+    -->
+    <svg id="emoji_events" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
+    <svg id="emoji_food_beverage" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 3H9v2.4l1.81 1.45c.12.09.19.24.19.39v4.26c0 .28-.22.5-.5.5h-4c-.28 0-.5-.22-.5-.5V7.24c0-.15.07-.3.19-.39L8 5.4V3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2a2 2 0 002-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/></svg>
+    <svg id="emoji_nature" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21.94 4.88A1.32 1.32 0 0020.68 4H19.6l-.31-.97C19.15 2.43 18.61 2 18 2s-1.15.43-1.29 1.04L16.4 4h-1.07c-.57 0-1.08.35-1.26.88-.19.56.04 1.17.56 1.48l.87.52-.4 1.24c-.23.58-.04 1.25.45 1.62.23.17.51.26.78.26.31 0 .61-.11.86-.32l.81-.7.81.7c.25.21.55.32.86.32.27 0 .55-.09.78-.26.5-.37.68-1.04.45-1.62l-.39-1.24.87-.52c.51-.31.74-.92.56-1.48zM18 7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM13.49 10.51c-.43-.43-.94-.73-1.49-.93V8h-1v1.38c-.11-.01-.23-.03-.34-.03-1.02 0-2.05.39-2.83 1.17-.16.16-.3.34-.43.53L6 10.52a3.01 3.01 0 00-3.83 1.82c-.27.75-.23 1.57.12 2.29.23.48.58.87 1 1.16-.38 1.35-.06 2.85 1 3.91a3.981 3.981 0 003.91 1c.29.42.68.77 1.16 1 .42.2.85.3 1.29.3.34 0 .68-.06 1.01-.17a3.007 3.007 0 001.82-3.85l-.52-1.37c.18-.13.36-.27.53-.43.87-.87 1.24-2.04 1.14-3.17H16v-1h-1.59c-.19-.55-.49-1.06-.92-1.5zm-8.82 3.78c-.25-.09-.45-.27-.57-.51s-.13-.51-.04-.76c.19-.52.76-.79 1.26-.61l3.16 1.19c-1.15.6-2.63 1.11-3.81.69zm6.32 5.65c-.25.09-.52.08-.76-.04a.989.989 0 01-.51-.57c-.42-1.18.09-2.65.7-3.8l1.18 3.13c.18.52-.09 1.1-.61 1.28zm1.21-5.34l-.61-1.61c0-.01-.01-.02-.02-.03l-.06-.12a.673.673 0 00-.07-.11l-.09-.09-.09-.09c-.03-.03-.07-.05-.11-.07-.04-.02-.07-.05-.12-.06-.01 0-.02-.01-.03-.02l-1.6-.6a1.966 1.966 0 012.67.13c.73.73.77 1.88.13 2.67z"/></svg>
+    <svg id="emoji_objects" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-.46 0-.93.04-1.4.14-2.76.53-4.96 2.76-5.48 5.52-.48 2.61.48 5.01 2.22 6.56.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 003.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0019 10c0-3.87-3.13-7-7-7zm2 16h-4v-1h4v1zm0-2h-4v-1h4v1zm-1.5-5.59V14h-1v-2.59L9.67 9.59l.71-.71L12 10.5l1.62-1.62.71.71-1.83 1.82z"/></svg>
+    <svg id="emoji_people" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><circle cx="12" cy="4" r="2"/><path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7h-2.54C8.24 6.99 6 4.75 6 2H4c0 3.16 2.11 5.84 5 6.71V22h2v-6h2v6h2V10.05L18.95 14l1.41-1.41-4.47-4.48z"/></svg>
+    <svg id="emoji_symbols" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 2h8v2H3zM6 11h2V7h3V5H3v2h3z"/><path transform="rotate(-45.001 17 17)" d="M11.5 16h11v2h-11z"/><circle cx="14.5" cy="14.5" r="1.5"/><circle cx="19.5" cy="19.5" r="1.5"/><path d="M15.5 11A2.5 2.5 0 0018 8.5V4h3V2h-4v4.51c-.42-.32-.93-.51-1.5-.51a2.5 2.5 0 000 5zM9.74 15.96l-1.41 1.41-.71-.71.35-.35a2.499 2.499 0 00-1.77-4.27 2.499 2.499 0 00-1.77 4.27l.35.35-1.06 1.06c-.98.98-.98 2.56 0 3.54.5.5 1.14.74 1.78.74s1.28-.24 1.77-.73l1.06-1.06 1.41 1.41 1.41-1.41-1.41-1.41 1.41-1.41-1.41-1.43zM5.85 14.2c.12-.12.26-.15.35-.15s.23.03.35.15c.19.2.19.51 0 .71l-.35.35-.35-.36a.501.501 0 010-.7zm0 5.65c-.12.12-.26.15-.35.15s-.23-.03-.35-.15a.513.513 0 010-.71l1.06-1.06.71.71-1.07 1.06z"/></svg>
+    <svg id="emoji_transportation" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.57 10.66c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 14.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V19h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 17c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/><path d="M14 9h1V3H7v5H2v13h1V9h5V4h6z"/><path d="M5 11h2v2H5zM10 5h2v2h-2zM5 15h2v2H5zM5 19h2v2H5z"/></svg>
+    <svg id="flag" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>
+    <svg id="insert_emoticon" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
+    <svg id="schedule" xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
+  </defs>
+</iron-iconset-svg>

chrome/browser/resources/chromeos/emoji_picker/icons.js

+// Copyright 2020 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.
+
+import 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
+import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+const template = html`{__html_template__}`;
+document.head.appendChild(template.content);
\ No newline at end of file