Move to using gr-icons instead of iron-icons
Google-Bug-Id: b/237255434
Release-Notes: skip
Change-Id: Ia4e794d7d78d79e1da67aec2e5a8d77d5a57a1c3
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>
`;
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>
`;
}