Diagnostics: Add custom icons

Screenshot: http://shortn/_EzVSDUHswl
Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp#db1415fc-6806-4059-958e-459d8da17580

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I910d41a48c036b4a9067355faff4592c80b88aed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2530902Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#844876}

chrome/test/data/webui/chromeos/diagnostics/battery_status_card_test.js

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 
 import 'chrome://diagnostics/battery_status_card.js';
-
-import {BatteryChargeStatus, BatteryHealth, BatteryInfo, SystemDataProviderInterface} from 'chrome://diagnostics/diagnostics_types.js';
-import {fakeBatteryChargeStatus, fakeBatteryHealth, fakeBatteryInfo} from 'chrome://diagnostics/fake_data.js';
+import {BatteryChargeStatus, BatteryHealth, BatteryInfo, ExternalPowerSource} from 'chrome://diagnostics/diagnostics_types.js';
+import {getDiagnosticsIcon} from 'chrome://diagnostics/diagnostics_utils.js';
+import {fakeBatteryChargeStatus, fakeBatteryChargeStatus2, fakeBatteryHealth, fakeBatteryHealth2, fakeBatteryInfo} from 'chrome://diagnostics/fake_data.js';
 import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
 import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 import {mojoString16ToString} from 'chrome://diagnostics/mojo_utils.js';
@@ -16,6 +16,8 @@ import {flushTasks, isChildVisible} from '../../test_util.m.js';
 
 import * as dx_utils from './diagnostics_test_utils.js';
 
+const BATTERY_ICON_PREFIX = 'battery-';
+
 export function batteryStatusCardTestSuite() {
   /** @type {?BatteryStatusCardElement} */
   let batteryStatusElement = null;
@@ -94,6 +96,16 @@ export function batteryStatusCardTestSuite() {
     return getRunTestsButton().disabled;
   }
 
+  /**
+   * Get batteryChargeStatus_.powerAdapterStatus private member for testing.
+   * @suppress {visibility} // access private member
+   * @return {!ExternalPowerSource}
+   */
+  function getPowerAdapterStatus() {
+    assertTrue(!!batteryStatusElement);
+    return batteryStatusElement.batteryChargeStatus_.powerAdapterStatus;
+  }
+
   test('BatteryStatusCardPopulated', () => {
     return initializeBatteryStatusCard(
                fakeBatteryInfo, fakeBatteryChargeStatus, fakeBatteryHealth)
@@ -163,4 +175,32 @@ export function batteryStatusCardTestSuite() {
               chromeos.diagnostics.mojom.RoutineType.kBatteryDischarge);
         });
   });
+
+  test('ShowsChargingIconWhenAdapterConnected', () => {
+    const expectedBatteryIcon =
+        getDiagnosticsIcon(BATTERY_ICON_PREFIX + 'charging');
+    return initializeBatteryStatusCard(
+               fakeBatteryInfo, fakeBatteryChargeStatus, fakeBatteryHealth)
+        .then(() => {
+          assertEquals(
+              chromeos.diagnostics.mojom.ExternalPowerSource.kAc,
+              getPowerAdapterStatus());
+          assertEquals(expectedBatteryIcon, batteryStatusElement.batteryIcon);
+        });
+  });
+
+  test('ShowsCorrectIconForBatteryPercentage', () => {
+    return initializeBatteryStatusCard(
+               fakeBatteryInfo, fakeBatteryChargeStatus2, fakeBatteryHealth2)
+        .then(() => {
+          assertEquals(
+              getPowerAdapterStatus(),
+              chromeos.diagnostics.mojom.ExternalPowerSource.kDisconnected);
+
+          const expectedIconRange = '71-77';
+          assertEquals(
+              getDiagnosticsIcon(BATTERY_ICON_PREFIX + expectedIconRange),
+              batteryStatusElement.batteryIcon);
+        });
+  });
 }

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -113,6 +113,12 @@ js_library("fake_system_routine_controller") {
   deps = [ "//ui/webui/resources/js:cr.m" ]
 }
 
+js_library("icons") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("memory_card") {
   deps = [
     ":data_point",
@@ -205,6 +211,7 @@ html_to_js("web_components") {
     "diagnostics_card.js",
     "diagnostics_fonts_css.js",
     "diagnostics_shared_css.js",
+    "icons.js",
     "memory_card.js",
     "overview_card.js",
     "percent_bar_chart.js",

chromeos/components/diagnostics_ui/resources/battery_status_card.html

-<style include="diagnostics-shared diagnostics-fonts"></style>
+<style include="diagnostics-shared diagnostics-fonts">
+  .remove-stroke {
+    --iron-icon-stroke-color: none;
+  }
+</style>
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
   <div id="batteryStatusChipInfo" slot="chip" class="diagnostics-chip">
     [[getDesignedFullCharge_(batteryHealth_.chargeFullDesignMilliampHours)]]
   </div>
-  <!-- TODO(michaelcheco): Replace placeholder icon. -->
-  <iron-icon slot="icon" icon="cr:add"></iron-icon>
+  <iron-icon slot="icon" icon="[[batteryIcon]]" class$="[[iconClass]]">
+  </iron-icon>
   <percent-bar-chart slot="left-panel" header="[[powerTimeString_]]"
     value="[[batteryChargeStatus_.chargeNowMilliampHours]]"
     max="[[batteryHealth_.chargeFullNowMilliampHours]]">

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -7,18 +7,23 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './icons.js';
 import './percent_bar_chart.js';
 import './routine_section.js';
 import './strings.m.js';
 
+import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BatteryChargeStatus, BatteryHealth, BatteryInfo, RoutineType, SystemDataProviderInterface} from './diagnostics_types.js'
+import {getDiagnosticsIcon} from './diagnostics_utils.js';
 import {getSystemDataProvider} from './mojo_interface_provider.js';
 import {mojoString16ToString} from './mojo_utils.js';
 
+const BATTERY_ICON_PREFIX = 'battery-';
+
 /**
  * @fileoverview
  * 'battery-status-card' shows information about battery status.
@@ -84,6 +89,20 @@ Polymer({
       value: false,
       notify: true,
     },
+
+    /** @type {string} */
+    batteryIcon: {
+      type: String,
+      computed: 'getBatteryIcon_(batteryChargeStatus_.powerAdapterStatus,' +
+          'batteryChargeStatus_.chargeNowMilliampHours,' +
+          'batteryHealth_.chargeFullNowMilliampHours)',
+    },
+
+    /** @type {string} */
+    iconClass: {
+      type: String,
+      computed: 'updateIconClassList_(batteryChargeStatus_.powerAdapterStatus)',
+    },
   },
 
   /** @override */
@@ -209,5 +228,79 @@ Polymer({
                 chromeos.diagnostics.mojom.ExternalPowerSource.kDisconnected ?
             'runBatteryDischargeTestText' :
             'runBatteryChargeTestText')
+  },
+
+  /**
+   * Use the current battery percentage to determine which icon to show the
+   * user. Each icon covers a range of 6 or 7 percentage values.
+   * @private
+   * @return {string}
+   */
+  getBatteryIconForChargePercentage_() {
+    if (!this.batteryChargeStatus_ || !this.batteryHealth_) {
+      return this.batteryIcon;
+    }
+
+    const percentage = Math.round(
+        100 * this.batteryChargeStatus_.chargeNowMilliampHours /
+        this.batteryHealth_.chargeFullNowMilliampHours);
+    assert(percentage > 0 && percentage <= 100);
+
+    const iconSizes = [
+      [1, 7],
+      [8, 14],
+      [15, 21],
+      [22, 28],
+      [29, 35],
+      [36, 42],
+      [43, 49],
+      [50, 56],
+      [57, 63],
+      [64, 70],
+      [71, 77],
+      [78, 85],
+      [86, 92],
+      [93, 100],
+    ];
+
+    for (const [rangeStart, rangeEnd] of iconSizes) {
+      if (percentage >= rangeStart && percentage <= rangeEnd) {
+        return getDiagnosticsIcon(
+            `${BATTERY_ICON_PREFIX}${rangeStart}-${rangeEnd}`);
+      }
+    };
+
+    assertNotReached();
+  },
+
+  /**
+   * @protected
+   * @return {string}
+   */
+  getBatteryIcon_() {
+    const charging = this.batteryChargeStatus_ &&
+        this.batteryChargeStatus_.powerAdapterStatus ===
+            chromeos.diagnostics.mojom.ExternalPowerSource.kAc;
+
+    if (charging) {
+      return getDiagnosticsIcon(`${BATTERY_ICON_PREFIX}charging`);
+    }
+
+    return this.getBatteryIconForChargePercentage_();
+  },
+
+  /**
+   * Use the power adapter status to determine if we need to overwrite the value
+   * for --iron-icon-stroke-color since the charging icon needs to remove it in
+   * order to display properly.
+   * @protected
+   * @return {string}
+   */
+  updateIconClassList_() {
+    return (this.batteryChargeStatus_ &&
+            this.batteryChargeStatus_.powerAdapterStatus ===
+                chromeos.diagnostics.mojom.ExternalPowerSource.kAc) ?
+        'remove-stroke' :
+        '';
   }
 });

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -2,11 +2,8 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
-  <div id="cpuChipInfo" slot="chip" class="diagnostics-chip">
-    [[cpuChipInfo_]]
-  </div>
-  <!-- TODO(michaelcheco): Replace placeholder icon. -->
-  <iron-icon slot="icon" icon="cr:add"></iron-icon>
+  <div id="cpuChipInfo" slot="chip">[[cpuChipInfo_]]</div>
+  <iron-icon slot="icon" icon="diagnostics:cpu"></iron-icon>
   <!-- TODO(michaelcheco): Add i18n string for percent number format -->
   <realtime-cpu-chart slot="left-panel" id="realtimeCpuChart"
     user="[[cpuUsage_.percentUsageUser]]"

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -7,6 +7,7 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './icons.js';
 import './realtime_cpu_chart.js';
 import './routine_section.js';
 import './strings.m.js';

chromeos/components/diagnostics_ui/resources/diagnostics_app_resources.grd

@@ -26,6 +26,7 @@
       <include name="IDR_DIAGNOSTICS_FAKE_SYSTEM_DATA_PROVIDER_JS" file="fake_system_data_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FAKE_SYSTEM_ROUTINE_CONTROLLER_JS" file="fake_system_routine_controller.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_FONTS_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.js" use_base_dir="false" type="BINDATA"/>
+      <include name="IDR_DIAGNOSTICS_ICONS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/icons.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MEMORY_CARD_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/memory_card.js" use_base_dir="false" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_INTERFACE_PROVIDER_JS" file="mojo_interface_provider.js" type="BINDATA"/>
       <include name="IDR_DIAGNOSTICS_MOJO_UTILS_JS" file="mojo_utils.js" type="BINDATA"/>

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

 <style include="diagnostics-shared diagnostics-fonts">
+  ::slotted([slot=chip]) {
+    background-color: var(--google-grey-100);
+    border-radius: 16px;
+    color: var(--diagnostics-overview-text-color);
+    padding: 4px 8px;
+  }
+
   ::slotted([slot=icon]) {
+    --iron-icon-fill-color: var(--google-blue-600);
+    --iron-icon-height: 20px;
+    --iron-icon-stroke-color: var(--google-blue-600);
+    --iron-icon-width: 20px;
     background-color: var(--google-blue-50);
     border-radius: 50%;
-    color: var(--google-blue-600);
-    height: 26px;
-    left: 5px;
-    margin-left: 20px;
-    margin-right: 28px;
-    padding: 2px;
+    margin: 0 20px;
+    padding: 8px;
     position: relative;
-    width: 20px;
   }
 
   ::slotted([slot=left-panel]) {

chromeos/components/diagnostics_ui/resources/diagnostics_utils.js

@@ -12,3 +12,12 @@
 export function convertKibToGibDecimalString(value, numDecimalPlaces) {
   return (value / 2 ** 20).toFixed(numDecimalPlaces);
 }
+
+/**
+ * Returns an icon from the diagnostics icon set.
+ * @param {string} id
+ * @return {string}
+ */
+export function getDiagnosticsIcon(id) {
+  return `diagnostics:${id}`;
+}

chromeos/components/diagnostics_ui/resources/fake_data.js

@@ -16,7 +16,8 @@ export const fakeBatteryChargeStatus = [
   {
     chargeNowMilliampHours: 4500,
     currentNowMilliamps: 1123,
-    powerAdapterStatus: chromeos.diagnostics.mojom.ExternalPowerSource.kAc,
+    powerAdapterStatus:
+        chromeos.diagnostics.mojom.ExternalPowerSource.kDisconnected,
     powerTime: stringToMojoString16('3h 01m'),
   },
   {
@@ -28,6 +29,25 @@ export const fakeBatteryChargeStatus = [
   }
 ];
 
+/** @type {!Array<!BatteryChargeStatus>} */
+export const fakeBatteryChargeStatus2 = [{
+  chargeNowMilliampHours: 4200,
+  currentNowMilliamps: 1123,
+  powerAdapterStatus:
+      chromeos.diagnostics.mojom.ExternalPowerSource.kDisconnected,
+  powerTime: stringToMojoString16('3h 15m'),
+}];
+
+/** @type {!Array<!BatteryHealth>} */
+export const fakeBatteryHealth2 = [
+  {
+    batteryWearPercentage: 7,
+    chargeFullDesignMilliampHours: 6000,
+    chargeFullNowMilliampHours: 5700,
+    cycleCount: 73,
+  },
+];
+
 /** @type {!Array<!BatteryHealth>} */
 export const fakeBatteryHealth = [
   {

chromeos/components/diagnostics_ui/resources/icons.html

+<iron-iconset-svg name="diagnostics" size="20">
+  <svg>
+    <defs>
+      <g id="cpu" stroke-width="1" fill-rule="evenodd">
+        <path d="M9,2 L9,4 L11,4 L11,2 L13,2 L13,4 L14,4 C15.1045695,4 16,4.8954305 16,6 L16,7 L18,7 L18,9 L16,9 L16,11 L18,11 L18,13 L16,13 L16,14 C16,15.1045695 15.1045695,16 14,16 L13,16 L13,18 L11,18 L11,16 L9,16 L9,18 L7,18 L7,16 L6,16 C4.8954305,16 4,15.1045695 4,14 L4,13 L2,13 L2,11 L4,11 L4,9 L2,9 L2,7 L4,7 L4,6 C4,4.8954305 4.8954305,4 6,4 L7,4 L7,2 L9,2 Z M14,6 L6,6 L6,14 L14,14 L14,6 Z M12,8 L12,12 L8,12 L8,8 L12,8 Z" />
+    </g>
+    <g id="battery-1-7">
+      <path d="M14 13.5H6V16H14V13.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-8-14">
+      <path d="M14 12.5H6V16H14V12.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5L6 16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-15-21">
+      <path d="M14 12H6V16H14V12Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-22-28">
+      <path d="M14 11.5H6L6 16H14V11.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5L6 16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-29-35">
+      <path d="M14 11H6V16H14V11Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-36-42">
+      <path d="M14 10.5H6V16H14V10.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-43-49">
+      <path d="M14 10H6V16H14V10Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-50-56">
+      <path d="M14 9.5H6V16H14V9.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-57-63">
+      <path d="M14 9H6V16H14V9Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-64-70">
+      <path d="M14 8.5H6V16H14V8.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-71-77">
+      <path d="M14 8H6V16H14V8Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-78-85">
+      <path d="M14 7.5H6L6 16H14V7.5Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V15H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5L6 16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-86-92">
+      <path d="M14 7H6V16H14V7Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 6H7.5V16H12.5V6ZM13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5Z" />
+    </g>
+    <g id="battery-93-100">
+      <path d="M12 4.5H13C13.5 4.5 14 5 14 5.5V16C14 16.5 13.5 17 13 17H7C6.5 17 6 16.5 6 16V5.5C6 5 6.5 4.5 7 4.5H8V3H12V4.5Z" />
+    </g>
+    <g id="battery-charging">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5ZM12.5 6H7.5V15.5H12.5V6Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.24839 11.9446C7.10262 11.7087 7.08937 11.4142 7.21337 11.1662L9.97532 5.64232C10.1412 5.31047 10.5136 5.13625 10.8747 5.22149C11.2358 5.30673 11.4909 5.62907 11.4909 6.00009V9.34302H12.0718C12.3491 9.34302 12.6066 9.48658 12.7524 9.72243C12.8981 9.95829 12.9114 10.2528 12.7874 10.5008L10.0254 16.0247C9.8595 16.3565 9.48718 16.5308 9.12608 16.4455C8.76498 16.3603 8.50988 16.0379 8.50988 15.6669V12.324H7.92891C7.65165 12.324 7.39415 12.1804 7.24839 11.9446ZM9.30988 11.524V15.6669L12.0718 10.143H10.6909V6.00009L7.92891 11.524H9.30988Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.30969 11.5239V15.6668L12.0716 10.1429H10.6907V6L7.92871 11.5239H9.30969Z" />
+    </g>
+    <g id="battery-outline">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13 4.5H12V3H8V4.5H7C6.5 4.5 6 5 6 5.5V16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16V5.5C14 5 13.5 4.5 13 4.5ZM12.5 6H7.5V15.5H12.5V6Z" />
+    </g>
+    <g id="memory">
+      <path d="M2,18 L18,18 L18,14 L2,14 L2,18 Z M4,15 L6,15 L6,17 L4,17 L4,15 Z M2,2 L2,6 L18,6 L18,2 L2,2 Z M6,5 L4,5 L4,3 L6,3 L6,5 Z M2,12 L18,12 L18,8 L2,8 L2,12 Z M4,9 L6,9 L6,11 L4,11 L4,9 Z" fill-rule="nonzero" />
+    </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/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, Polymer} 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

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -3,7 +3,7 @@
 
 <diagnostics-card hide-data-points="true">
   <div id="cardTitle" slot="title">[[i18n('memoryTitle')]]</div>
-  <iron-icon slot="icon" icon="cr:add"></iron-icon>
+  <iron-icon slot="icon" icon="diagnostics:memory"></iron-icon>
   <percent-bar-chart slot="left-panel"
     header="[[getAvailableMemory_(memoryUsage_)]]"
     value="[[getTotalUsedMemory_(memoryUsage_)]]"

chromeos/components/diagnostics_ui/resources/memory_card.js

@@ -7,6 +7,7 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './icons.js';
 import './percent_bar_chart.js';
 import './routine_section.js';
 import './strings.m.js';