Change iron-icon to sl-icon

client-src/components.js

@@ -2,8 +2,6 @@
 
 // polymer components
 import '@polymer/iron-collapse';
-import '@polymer/iron-icon';
-import '@polymer/iron-iconset-svg';
 
 // Shoelace components
 // css is imported via _base.html in base.css, built by gulpfile.babel.js.
@@ -44,7 +42,6 @@ registerIconLibrary('material', {
 
 
 // chromedash components
-import './elements/icons';
 import './elements/chromedash-admin-blink-component-listing';
 import './elements/chromedash-admin-blink-page';
 import './elements/chromedash-admin-feature-links-page';

client-src/css/elements/chromedash-roadmap-milestone-card-css.js

@@ -31,27 +31,14 @@ export const ROADMAP_MILESTONE_CARD_CSS = [
       counter-reset: featurecount;
       margin: 8px;
     }
-    iron-icon {
-      --iron-icon-height: 18px;
-      --iron-icon-width: 18px;
+    sl-icon {
+      font-size: 1.4rem;
       color: #366597;
     }
-    iron-icon:hover.android {
-      color: #a4c739;
+    sl-icon:hover {
+      color: #248;
     }
-    iron-icon:hover.remove {
-      color: var(--paper-red-700);
-    }
-    iron-icon:hover.deprecated {
-      color: var(--paper-orange-700);
-    }
-    iron-icon:hover.experimental {
-      color: var(--paper-green-700);
-    }
-    iron-icon:hover.intervention {
-      color: var(--paper-yellow-800);
-    }
-    iron-icon.pushicon {
+    sl-icon.pushicon {
       cursor: pointer;
     }
     sl-icon-button {

client-src/css/shared-css.js

@@ -185,11 +185,6 @@ export const SHARED_STYLES = [
     display: none;
   }
 
-  iron-icon {
-    height: var(--icon-size);
-    width: var(--icon-size);
-  }
-
   .preformatted {
     white-space: pre-wrap;
   }
@@ -201,9 +196,20 @@ export const SHARED_STYLES = [
     color: var(--warning-color);
   }
 
+  #breadcrumbs {
+    display: flex;
+    align-items: center;
+  }
+
   #breadcrumbs a {
     text-decoration: none;
     color: inherit;
+    display: flex;
+    align-items: center;
+  }
+
+  #breadcrumbs a sl-icon {
+    padding-right: var(--content-padding-half);
   }
 
   sl-dialog::part(title) {

client-src/elements/chromedash-activity-log.ts

@@ -1,4 +1,3 @@
-import '@polymer/iron-icon';
 import {LitElement, css, html, nothing} from 'lit';
 import {property, state} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';

client-src/elements/chromedash-activity-page.ts

@@ -160,7 +160,7 @@ export class ChromedashActivityPage extends LitElement {
       <div id="header">
         <h2 id="breadcrumbs">
           <a href="/feature/${this.featureId}">
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Comments &amp; Activity
           </a>
         </h2>

client-src/elements/chromedash-callout.ts

@@ -127,11 +127,7 @@ class ChromedashCallout extends LitElement {
         ?hidden=${this.hidden}
         style="top:${this.top}px; left:${this.left}px;"
       >
-        <iron-icon
-          id="closebox"
-          icon="chromestatus:close"
-          @click=${this.dismiss}
-        ></iron-icon>
+        <sl-icon id="closebox" name="x" @click=${this.dismiss}></sl-icon>
         <div id="cue-content-container">
           <slot></slot>
         </div>

client-src/elements/chromedash-feature-detail.ts

@@ -26,7 +26,6 @@ import {
 import {makeDisplaySpecs} from './form-field-specs';
 import {getFieldValueFromFeature, hasFieldValue, isDefinedValue} from './utils';
 
-import '@polymer/iron-icon';
 import {property, state} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {Feature, FeatureLink, StageDict, User} from '../js-src/cs-client';

client-src/elements/chromedash-feature-page.ts

@@ -517,7 +517,7 @@ export class ChromedashFeaturePage extends LitElement {
     const canShare = typeof navigator.share === 'function';
     return html`
       <div id="subheader" style="display:block">
-        <div class="tooltips" style="float:right">
+        <div class="tooltips" style="float:right; font-size:1.1rem">
           ${this.user
             ? html`
                 <span
@@ -530,12 +530,10 @@ export class ChromedashFeaturePage extends LitElement {
                     id="star-when-signed-in"
                     @click=${this.handleStarClick}
                   >
-                    <iron-icon
-                      icon=${this.starred
-                        ? 'chromestatus:star'
-                        : 'chromestatus:star-border'}
+                    <sl-icon
+                      name=${this.starred ? 'star-fill' : 'star'}
                       class="pushicon"
-                    ></iron-icon>
+                    ></sl-icon>
                   </a>
                 </span>
               `
@@ -548,7 +546,7 @@ export class ChromedashFeaturePage extends LitElement {
               target="_blank"
               rel="noopener"
             >
-              <iron-icon icon="chromestatus:bug-report"></iron-icon>
+              <sl-icon name="bug"></sl-icon>
             </a>
           </span>
           <span
@@ -561,7 +559,7 @@ export class ChromedashFeaturePage extends LitElement {
               id="share-feature"
               @click=${this.handleShareClick}
             >
-              <iron-icon icon="chromestatus:share"></iron-icon>
+              <sl-icon name="share"></sl-icon>
             </a>
           </span>
           <span
@@ -574,13 +572,13 @@ export class ChromedashFeaturePage extends LitElement {
               id="copy-link"
               @click=${this.handleCopyLinkClick}
             >
-              <iron-icon icon="chromestatus:link"></iron-icon>
+              <sl-icon library="material" name="link"></sl-icon>
             </a>
           </span>
         </div>
         <h2 id="breadcrumbs">
           <a href="${this.contextLink}">
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
           </a>
           <a href="/feature/${this.featureId}">
             Feature: ${this.feature.name}
@@ -639,7 +637,7 @@ export class ChromedashFeaturePage extends LitElement {
         warnings.push(html`
           <div class="warning layout horizontal center">
             <span class="tooltip" id="outdated-icon" title="Feature outdated ">
-              <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+              <sl-icon name="exclamation-circle-fill" data-tooltip></sl-icon>
             </span>
             <span>
               Your feature hasn't been verified as accurate since&nbsp;
@@ -661,7 +659,7 @@ export class ChromedashFeaturePage extends LitElement {
         warnings.push(html`
           <div class="warning layout horizontal center">
             <span class="tooltip" id="outdated-icon" title="Feature outdated ">
-              <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+              <sl-icon name="exclamation-circle-fill" data-tooltip></sl-icon>
             </span>
             <span>
               This feature hasn't been verified as accurate since&nbsp;
@@ -688,7 +686,7 @@ export class ChromedashFeaturePage extends LitElement {
               id="shipped-outdated-author"
               title="Feature outdated "
             >
-              <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+              <sl-icon name="exclamation-circle-fill" data-tooltip></sl-icon>
             </span>
             <span>
               Your feature hasn't been verified as accurate since&nbsp;
@@ -714,7 +712,7 @@ export class ChromedashFeaturePage extends LitElement {
               id="shipped-outdated-all"
               title="Feature outdated "
             >
-              <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+              <sl-icon name="exclamation-circle-fill" data-tooltip></sl-icon>
             </span>
             <span>
               This feature hasn't been verified as accurate since&nbsp;

client-src/elements/chromedash-feature-page_test.ts

@@ -238,7 +238,7 @@ describe('chromedash-feature-page', () => {
     // crbug link is clickable
     assert.include(subheaderDiv.innerHTML, 'href="fake crbug link"');
     // star icon is rendered and the feature is starred
-    assert.include(subheaderDiv.innerHTML, 'icon="chromestatus:star"');
+    assert.include(subheaderDiv.innerHTML, 'name="star-fill"');
 
     const breadcrumbsH2 = component.shadowRoot?.querySelector('h2#breadcrumbs');
     assert.exists(breadcrumbsH2);

client-src/elements/chromedash-guide-editall-page.ts

@@ -186,7 +186,7 @@ export class ChromedashGuideEditallPage extends LitElement {
       <div id="subheader">
         <h2 id="breadcrumbs">
           <a href=${this.getNextPage()}>
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Edit feature: ${this.loading ? 'loading...' : this.feature.name}
           </a>
         </h2>

client-src/elements/chromedash-guide-metadata-page.ts

@@ -159,7 +159,7 @@ export class ChromedashGuideMetadataPage extends LitElement {
       ? nothing
       : html`
           <a href=${this.getNextPage()}>
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Edit feature: ${this.feature.name}
           </a>
         `;

client-src/elements/chromedash-guide-stage-page.ts

@@ -228,7 +228,7 @@ export class ChromedashGuideStagePage extends LitElement {
       <div id="subheader">
         <h2 id="breadcrumbs">
           <a href=${this.getNextPage()}>
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Edit feature: ${this.feature.name}
           </a>
         </h2>

client-src/elements/chromedash-guide-verify-accuracy-page.ts

@@ -147,7 +147,7 @@ export class ChromedashGuideVerifyAccuracyPage extends LitElement {
       <div id="subheader">
         <h2 id="breadcrumbs">
           <a href="/feature/${this.featureId}">
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Verify feature data for ${this.feature.name}
           </a>
         </h2>

client-src/elements/chromedash-header.ts

@@ -106,6 +106,14 @@ export class ChromedashHeader extends LitElement {
           width: 100%;
         }
 
+        .nav-dropdown-trigger {
+          display: flex;
+          align-items: flex-end;
+        }
+        .nav-dropdown-trigger sl-icon {
+          padding-left: var(--content-padding-half);
+        }
+
         .menu {
           margin-left: 15px;
           margin-right: 7px;
@@ -325,10 +333,11 @@ export class ChromedashHeader extends LitElement {
                   </sl-button>
                 `
               : nothing}
+
             <div class="nav-dropdown-container" data-testid="account-indicator">
               <a class="nav-dropdown-trigger">
                 ${this.user.email}
-                <iron-icon icon="chromestatus:arrow-drop-down"></iron-icon>
+                <sl-icon name="caret-down-fill"></sl-icon>
               </a>
               <ul>
                 <li><a href="/settings">Settings</a></li>

client-src/elements/chromedash-intent-content.ts

@@ -171,11 +171,11 @@ export class ChromedashIntentContent extends LitElement {
           style="float:right"
           title="Copy text to clipboard"
         >
-          <iron-icon
-            icon="chromestatus:content_copy"
+          <sl-icon
+            name="copy"
             id="copy-email-body"
             @click="${() => this.copyIntentBodyHandler()}"
-          ></iron-icon>
+          ></sl-icon>
         </span>
       </p>
 

client-src/elements/chromedash-ot-creation-page.ts

@@ -427,7 +427,7 @@ export class ChromedashOTCreationPage extends LitElement {
       ? nothing
       : html`
           <a href=${this.getNextPage()}>
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Request origin trial creation: ${this.feature.name}
           </a>
         `;

client-src/elements/chromedash-ot-extension-page.ts

@@ -249,7 +249,7 @@ export class ChromedashOTExtensionPage extends LitElement {
       ? nothing
       : html`
           <a href=${this.getNextPage()}>
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon>
+            <sl-icon name="arrow-left"></sl-icon>
             Request origin trial extension: ${this.feature.name}
           </a>
         `;