Migrate gr-diff to use material-icons Screenshot: https://imgur.com/a/YT5ZGCx Google-Bug-Id: b/237255434 Release-Notes: skip Change-Id: Ib59a51a974dbcb18f99a806e54d3c324fa618ff9

diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-legacy.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-legacy.ts
index 207270c..eb99b32 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-legacy.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-builder-legacy.ts

@@ -472,7 +472,7 @@
       cells[signCols.right].classList.add('sign', 'right');
     }
     const moveRangeHeader = createElementDiff('gr-range-header');
-    moveRangeHeader.setAttribute('icon', 'gr-icons:move-item');
+    moveRangeHeader.setAttribute('icon', 'move_item');
     moveRangeHeader.appendChild(descriptionTextDiv);
     cells[descriptionIndex].classList.add('moveHeader');
     cells[descriptionIndex].appendChild(moveRangeHeader);

diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
index cb7d2db..6630532 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts

@@ -668,10 +668,10 @@
           --divider-height: var(--spacing-s);
           --divider-border: 1px;
         }
+        /* TODO: Is this still used? */
         .contextControl gr-button iron-icon {
           /* should match line-height of gr-button */
-          width: var(--line-height-mono, 18px);
-          height: var(--line-height-mono, 18px);
+          font-size: var(--line-height-mono, 18px);
         }
         .contextControl td:not(.lineNumButton) {
           text-align: center;
@@ -790,6 +790,7 @@
           font-size: var(--font-size-normal, 14px);
           line-height: var(--line-height-normal);
         }
+        /* TODO: Is this still used? */
         td.lost iron-icon {
           padding: 0 var(--spacing-s) 0 var(--spacing-m);
           color: var(--blue-700);
@@ -1733,8 +1734,9 @@
 
   private portedCommentsWithoutRangeMessage() {
     const div = document.createElement('div');
-    const icon = document.createElement('iron-icon');
-    icon.setAttribute('icon', 'gr-icons:info-outline');
+    const icon = document.createElement('span');
+    icon.className = 'material-icon';
+    icon.innerText = 'info';
     div.appendChild(icon);
     const span = document.createElement('span');
     span.innerText = 'Original comment position not found in this patchset';

diff --git a/polygerrit-ui/app/embed/diff/gr-range-header/gr-range-header.ts b/polygerrit-ui/app/embed/diff/gr-range-header/gr-range-header.ts
index c80a459..f386a47 100644
--- a/polygerrit-ui/app/embed/diff/gr-range-header/gr-range-header.ts
+++ b/polygerrit-ui/app/embed/diff/gr-range-header/gr-range-header.ts

@@ -5,7 +5,7 @@
  */
 import {LitElement, css, html} from 'lit';
 import {customElement, property} from 'lit/decorators';
-import '@polymer/iron-icon/iron-icon';
+import {iconStyles} from '../../../styles/gr-icon-styles';
 
 /**
  * Represents a header (label) for a code chunk whenever showing
@@ -18,8 +18,12 @@
   @property({type: String})
   icon?: string;
 
+  @property({type: Boolean})
+  filled?: boolean;
+
   static override get styles() {
     return [
+      iconStyles,
       css`
         .row {
           color: var(--gr-range-header-color);
@@ -33,8 +37,7 @@
         }
         .icon {
           color: var(--gr-range-header-color);
-          height: var(--line-height-small, 16px);
-          width: var(--line-height-small, 16px);
+          font-size: var(--line-height-small, 16px);
           margin-right: var(--spacing-s);
         }
       `,
@@ -44,7 +47,11 @@
   override render() {
     const icon = this.icon ?? '';
     return html` <div class="row">
-      <iron-icon class="icon" .icon=${icon} aria-hidden="true"></iron-icon>
+      <span
+        class="icon material-icon ${this.filled ? 'filled' : ''}"
+        aria-hidden="true"
+        >${icon}</span
+      >
       <slot></slot>
     </div>`;
   }

diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts
index 235da89..35d496a 100644
--- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts
+++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts

@@ -33,7 +33,7 @@
 
   override render() {
     return html`<div class="rangeHighlight row">
-      <gr-range-header icon="gr-icons:comment"
+      <gr-range-header icon="mode_comment" filled
         >${this._computeRangeLabel(this.range)}</gr-range-header
       >
     </div>`;