Move to using gr-icons instead of iron-icons

Google-Bug-Id: b/237255434
Release-Notes: skip
Change-Id: Ia4e794d7d78d79e1da67aec2e5a8d77d5a57a1c3

web/gr-checkers-list.ts

diff --git a/web/gr-checkers-list.ts b/web/gr-checkers-list.ts
index 2dce3b8..ed24a2f 100644
--- a/web/gr-checkers-list.ts
+++ b/web/gr-checkers-list.ts
@@ -98,7 +98,7 @@
         height: 80vh;
         overflow: auto;
       }
-      iron-icon {
+      gr-icon {
         cursor: pointer;
       }
       #filter {
@@ -130,13 +130,12 @@
         margin-right: 20px;
       }
       nav,
-      iron-icon {
+      gr-icon {
         color: var(--deemphasized-text-color);
       }
-      .nav-iron-icon {
-        height: 1.85rem;
+      .nav-gr-icon {
+        font-size: 1.85rem;
         margin-left: 16px;
-        width: 1.85rem;
       }
       .nav-buttons:hover {
         text-decoration: underline;
@@ -233,10 +232,7 @@
     };
     return html`
       <a class="nav-buttons" @click="${handleClick}">
-        <iron-icon
-          class="nav-iron-icon"
-          icon="gr-icons:chevron-left"
-        ></iron-icon>
+        <gr-icon class="nav-gr-icon" icon="chevron_left"></gr-icon>
       </a>
     `;
   }
@@ -251,10 +247,7 @@
     };
     return html`
       <a class="nav-buttons" @click="${handleClick}">
-        <iron-icon
-          class="nav-iron-icon"
-          icon="gr-icons:chevron-right"
-        ></iron-icon>
+        <gr-icon class="nav-gr-icon" icon="chevron_right"></gr-icon>
       </a>
     `;
   }
@@ -274,7 +267,7 @@
         <td class="name">${checker?.blocking?.length ? 'YES' : 'NO'}</td>
         <td class="description">${checker.description}</td>
         <td @click="${edit}">
-          <iron-icon icon="gr-icons:edit"></iron-icon>
+          <gr-icon icon="edit" filled></gr-icon>
         </td>
       </tr>
     `;

web/gr-repo-chip.ts

diff --git a/web/gr-repo-chip.ts b/web/gr-repo-chip.ts
index b0a361d..20df8ab 100644
--- a/web/gr-repo-chip.ts
+++ b/web/gr-repo-chip.ts
@@ -21,6 +21,7 @@
 declare global {
   interface HTMLElementTagNameMap {
     'gr-repo-chip': GrRepoChip;
+    'gr-icon': HTMLElement; // Known to exist from Polygerrit
   }
 }
 
@@ -37,9 +38,8 @@
       --gr-button-padding: 0;
       vertical-align: top;
     }
-    iron-icon {
-      height: var(--line-height-normal);
-      width: var(--line-height-normal);
+    gr-icon {
+      font-size: var(--line-height-normal);
     }
   `;
 
@@ -55,7 +55,7 @@
         aria-label="Remove"
         @click="${this.handleRemove}"
       >
-        <iron-icon icon="gr-icons:close"></iron-icon>
+        <gr-icon icon="close"></gr-icon>
       </gr-button>
     `;
   }