diff --git a/client-src/components.js b/client-src/components.js
index 256e4f05ff37..0f05c21d31c6 100644
--- a/client-src/components.js
+++ b/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';
diff --git a/client-src/css/elements/chromedash-roadmap-milestone-card-css.js b/client-src/css/elements/chromedash-roadmap-milestone-card-css.js
index 4a23d33ed79b..f92f130a7b69 100644
--- a/client-src/css/elements/chromedash-roadmap-milestone-card-css.js
+++ b/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 {
diff --git a/client-src/css/shared-css.js b/client-src/css/shared-css.js
index 6f69fe30bba0..411188f312ea 100644
--- a/client-src/css/shared-css.js
+++ b/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) {
diff --git a/client-src/elements/chromedash-activity-log.ts b/client-src/elements/chromedash-activity-log.ts
index e4b411b80c9b..db727faa15e7 100644
--- a/client-src/elements/chromedash-activity-log.ts
+++ b/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';
diff --git a/client-src/elements/chromedash-activity-page.ts b/client-src/elements/chromedash-activity-page.ts
index b023e86e54d0..dd08655b3dc6 100644
--- a/client-src/elements/chromedash-activity-page.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-callout.ts b/client-src/elements/chromedash-callout.ts
index 0768fb7570ca..c3db2933b0da 100644
--- a/client-src/elements/chromedash-callout.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-feature-detail.ts b/client-src/elements/chromedash-feature-detail.ts
index da6f8180114e..fbb3f3ffbd38 100644
--- a/client-src/elements/chromedash-feature-detail.ts
+++ b/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';
diff --git a/client-src/elements/chromedash-feature-page.ts b/client-src/elements/chromedash-feature-page.ts
index e2c0d739d1a2..cb2a981523c1 100644
--- a/client-src/elements/chromedash-feature-page.ts
+++ b/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;
diff --git a/client-src/elements/chromedash-feature-page_test.ts b/client-src/elements/chromedash-feature-page_test.ts
index d34a79efb687..dd58a3cde5fe 100644
--- a/client-src/elements/chromedash-feature-page_test.ts
+++ b/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);
diff --git a/client-src/elements/chromedash-guide-editall-page.ts b/client-src/elements/chromedash-guide-editall-page.ts
index 062c2dccfe47..817997ee735c 100644
--- a/client-src/elements/chromedash-guide-editall-page.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-guide-metadata-page.ts b/client-src/elements/chromedash-guide-metadata-page.ts
index a2fbacf9fe7f..14ae88528e99 100644
--- a/client-src/elements/chromedash-guide-metadata-page.ts
+++ b/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>
         `;
diff --git a/client-src/elements/chromedash-guide-stage-page.ts b/client-src/elements/chromedash-guide-stage-page.ts
index 93cbfd7ed159..4dd6b15cf437 100644
--- a/client-src/elements/chromedash-guide-stage-page.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-guide-verify-accuracy-page.ts b/client-src/elements/chromedash-guide-verify-accuracy-page.ts
index 5467dde24069..bb8e66616cd4 100644
--- a/client-src/elements/chromedash-guide-verify-accuracy-page.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-header.ts b/client-src/elements/chromedash-header.ts
index 1e6eec20784b..257e323c2efd 100644
--- a/client-src/elements/chromedash-header.ts
+++ b/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>
diff --git a/client-src/elements/chromedash-intent-content.ts b/client-src/elements/chromedash-intent-content.ts
index 2e0a0c53e663..39e8293cf9c8 100644
--- a/client-src/elements/chromedash-intent-content.ts
+++ b/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>
 
diff --git a/client-src/elements/chromedash-ot-creation-page.ts b/client-src/elements/chromedash-ot-creation-page.ts
index ac73d6a8c2c0..bb3b5ba39dd1 100644
--- a/client-src/elements/chromedash-ot-creation-page.ts
+++ b/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>
         `;
diff --git a/client-src/elements/chromedash-ot-extension-page.ts b/client-src/elements/chromedash-ot-extension-page.ts
index dde93d8ddd00..e0936a8186c7 100644
--- a/client-src/elements/chromedash-ot-extension-page.ts
+++ b/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>
         `;
diff --git a/client-src/elements/chromedash-roadmap-milestone-card.ts b/client-src/elements/chromedash-roadmap-milestone-card.ts
index 8c793d92bf96..5977cda49387 100644
--- a/client-src/elements/chromedash-roadmap-milestone-card.ts
+++ b/client-src/elements/chromedash-roadmap-milestone-card.ts
@@ -317,62 +317,68 @@ export class ChromedashRoadmapMilestoneCard extends LitElement {
                   id="outdated-icon"
                   title="Feature outdated - last checked for overall accuracy more than four weeks ago"
                 >
-                  <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
+                  <sl-icon
+                    name="exclamation-circle-fill"
+                    data-tooltip
+                  ></sl-icon>
                 </span>
               `
             : nothing}
           ${ORIGIN_TRIAL.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Origin Trial">
-                  <iron-icon
-                    icon="chromestatus:extension"
+                  <sl-icon
+                    library="material"
+                    name="extension"
                     class="experimental"
                     data-tooltip
-                  ></iron-icon>
+                  ></sl-icon>
                 </span>
               `
             : nothing}
           ${DEPRECATION_TRIAL.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Deprecation Trial">
-                  <iron-icon
-                    icon="chromestatus:extension"
+                  <sl-icon
+                    library="material"
+                    name="extension"
                     class="experimental"
                     data-tooltip
-                  ></iron-icon>
+                  ></sl-icon>
                 </span>
               `
             : nothing}
           ${BROWSER_INTERVENTION.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Browser intervention">
-                  <iron-icon
-                    icon="chromestatus:pan-tool"
+                  <sl-icon
+                    library="material"
+                    name="pan-tool"
                     class="intervention"
                     data-tooltip
-                  ></iron-icon>
+                  ></sl-icon>
                 </span>
               `
             : nothing}
           ${REMOVED_STATUS.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Removed">
-                  <iron-icon
-                    icon="chromestatus:cancel"
+                  <sl-icon
+                    name="x-circle-fill"
                     class="remove"
                     data-tooltip
-                  ></iron-icon>
+                  ></sl-icon>
                 </span>
               `
             : nothing}
           ${DEPRECATED_STATUS.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Deprecated">
-                  <iron-icon
-                    icon="chromestatus:warning"
+                  <sl-icon
+                    name="exclamation-triangle-fill"
                     class="deprecated"
                     data-tooltip
-                  ></iron-icon>
+                  ></sl-icon>
                 </span>
               `
             : nothing}
@@ -382,15 +388,15 @@ export class ChromedashRoadmapMilestoneCard extends LitElement {
                   class="tooltip"
                   title="Receive an email notification when there are updates"
                 >
-                  <iron-icon
-                    icon="${this.starredFeatures.has(Number(f.id))
-                      ? 'chromestatus:star'
-                      : 'chromestatus:star-border'}"
+                  <sl-icon
+                    name="${this.starredFeatures.has(Number(f.id))
+                      ? 'star-fill'
+                      : 'star'}"
                     class="pushicon"
                     data-feature-id="${f.id}"
                     @click="${this.toggleStar}"
                   >
-                  </iron-icon>
+                  </sl-icon>
                 </span>
               `
             : nothing}
diff --git a/client-src/elements/chromedash-roadmap.ts b/client-src/elements/chromedash-roadmap.ts
index 580b09063152..c499de29b905 100644
--- a/client-src/elements/chromedash-roadmap.ts
+++ b/client-src/elements/chromedash-roadmap.ts
@@ -1,4 +1,3 @@
-import '@polymer/iron-icon';
 import {LitElement, css, html} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {repeat} from 'lit/directives/repeat.js';
diff --git a/client-src/elements/chromedash-stack-rank.ts b/client-src/elements/chromedash-stack-rank.ts
index e704fb4d18ef..422228816303 100644
--- a/client-src/elements/chromedash-stack-rank.ts
+++ b/client-src/elements/chromedash-stack-rank.ts
@@ -1,4 +1,3 @@
-import '@polymer/iron-icon';
 import {LitElement, css, html, nothing} from 'lit';
 import {customElement, property, state} from 'lit/decorators.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
@@ -218,7 +217,7 @@ class ChromedashStackRank extends LitElement {
               variant="text"
               ?disabled=${!this.viewList.length}
             >
-              <iron-icon icon="chromestatus:sort"></iron-icon>
+              <sl-icon name="filter-left"></sl-icon>
               SORT BY
             </sl-button>
             <sl-menu @click="${this.sort}">
@@ -276,10 +275,7 @@ class ChromedashStackRank extends LitElement {
                 href="#${item.property_name}"
                 @click=${this.scrollToPosition}
               >
-                <iron-icon
-                  class="hash-link"
-                  icon="chromestatus:link"
-                ></iron-icon>
+                <sl-icon class="hash-link" name="link"></sl-icon>
                 <p>${item.property_name}</p>
               </a>
             </div>
@@ -298,7 +294,7 @@ class ChromedashStackRank extends LitElement {
                   .view}/${item.bucket_id}"
                 title="Click to see a timeline view of this property"
               >
-                <iron-icon icon="chromestatus:timeline"></iron-icon>
+                <sl-icon name="graph-up"></sl-icon>
                 <p class="icon-text">Timeline</p>
               </a>
             </div>
@@ -334,7 +330,7 @@ class ChromedashStackRank extends LitElement {
           <div class="stack-rank-item-result">
             <p class="title-text">Percentage</p>
             <a class="icon-wrapper spacer">
-              <iron-icon icon="chromestatus:timeline"></iron-icon>
+              <sl-icon name="graph-up"></sl-icon>
               <p class="icon-text">Timeline</p>
             </a>
           </div>
diff --git a/client-src/elements/chromedash-timeline-page.ts b/client-src/elements/chromedash-timeline-page.ts
index 13d65259363b..026bd8a63b0d 100644
--- a/client-src/elements/chromedash-timeline-page.ts
+++ b/client-src/elements/chromedash-timeline-page.ts
@@ -51,7 +51,7 @@ export class ChromedashTimelinePage extends LitElement {
       <div id="subheader">
         <h2 id="breadcrumbs">
           <a href="/metrics/${this.type}/${this.view}">
-            <iron-icon icon="chromestatus:arrow-back"></iron-icon> </a
+            <sl-icon name="arrow-left"></sl-icon> </a
           >${subTitleText} > timeline
         </h2>
       </div>
diff --git a/client-src/elements/icons.ts b/client-src/elements/icons.ts
deleted file mode 100644
index 3c3404a9a3b2..000000000000
--- a/client-src/elements/icons.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-/**
- * Add icons to iron-icon.
- * This file uses a similar pattern used in iron-icons (https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js)
- */
-
-import {html, render} from 'lit';
-import '@polymer/iron-icon';
-import '@polymer/iron-iconset-svg';
-
-const template = html`
-  <iron-iconset-svg name="chromestatus" size="24">
-    <svg>
-      <defs>
-        <g id="accessibility">
-          <path
-            d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"
-          ></path>
-        </g>
-
-        <g id="add-circle-outline">
-          <path
-            d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-          ></path>
-        </g>
-
-        <g id="android">
-          <path
-            d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"
-          ></path>
-        </g>
-
-        <g id="approval">
-          <path
-            d="M4,16v6h16v-6c0-1.1-0.9-2-2-2H6C4.9,14,4,14.9,4,16z M18,18H6v-2h12V18z M12,2C9.24,2,7,4.24,7,7l5,7l5-7 C17,4.24,14.76,2,12,2z M12,11L9,7c0-1.66,1.34-3,3-3s3,1.34,3,3L12,11z"
-          ></path>
-        </g>
-
-        <g id="arrow-back">
-          <path
-            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-          ></path>
-        </g>
-
-        <g id="arrow-drop-down"><path d="M7 10l5 5 5-5z"></path></g>
-
-        <g id="arrow-drop-up"><path d="M7 14l5-5 5 5z"></path></g>
-
-        <g id="bug-report">
-          <path
-            d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"
-          ></path>
-        </g>
-
-        <g id="cancel">
-          <path
-            d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
-          ></path>
-        </g>
-
-        <g id="close">
-          <path
-            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-          ></path>
-        </g>
-
-        <g id="content_copy">
-          <path
-            d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
-          ></path>
-        </g>
-
-        <g id="create">
-          <path
-            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-          ></path>
-        </g>
-
-        <g id="css">
-          <path
-            d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"
-          />
-        </g>
-
-        <g id="device">
-          <path
-            d="M15 7v4h1v2h-3V5h2l-3-4-3 4h2v8H8v-2.07c.7-.37 1.2-1.08 1.2-1.93 0-1.21-.99-2.2-2.2-2.2-1.21 0-2.2.99-2.2 2.2 0 .85.5 1.56 1.2 1.93V13c0 1.11.89 2 2 2h3v3.05c-.71.37-1.2 1.1-1.2 1.95 0 1.22.99 2.2 2.2 2.2 1.21 0 2.2-.98 2.2-2.2 0-.85-.49-1.58-1.2-1.95V15h3c1.11 0 2-.89 2-2v-2h1V7h-4z"
-          />
-        </g>
-
-        <g id="dom">
-          <path
-            d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"
-          />
-        </g>
-
-        <g id="extension">
-          <path
-            d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
-          ></path>
-        </g>
-
-        <g id="flag"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"></path></g>
-
-        <g id="fileapis">
-          <path
-            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
-          />
-        </g>
-
-        <g id="filter-list-from-gmail">
-          <path
-            d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
-          ></path>
-        </g>
-
-        <g id="graphics">
-          <path
-            d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
-          />
-        </g>
-
-        <g id="help">
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-          ></path>
-        </g>
-
-        <g id="javascript">
-          <path
-            d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
-          />
-        </g>
-
-        <g id="link">
-          <path
-            d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"
-          ></path>
-        </g>
-
-        <g id="notifications">
-          <path
-            d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
-          ></path>
-        </g>
-
-        <g id="notifications-off">
-          <path
-            d="M20 18.69L7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72l-1-1.03zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2zm6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11h-.01c-.01 0-.01 0-.02.01-.23.09-.46.2-.68.31 0 0-.01 0-.01.01L18 14.68z"
-          ></path>
-        </g>
-
-        <g id="pan-tool">
-          <path
-            d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"
-          ></path>
-        </g>
-
-        <g id="userinput">
-          <path
-            d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"
-          />
-        </g>
-
-        <g id="menu">
-          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
-        </g>
-
-        <g id="misc">
-          <path
-            d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
-          />
-        </g>
-
-        <g id="multimedia">
-          <path
-            d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z"
-          />
-        </g>
-
-        <g id="networkconnectivity">
-          <path fill-opacity=".3" d="M2 22h20V2z" />
-          <path d="M17 7L2 22h15z" />
-        </g>
-
-        <g id="offlinestorage">
-          <path
-            d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"
-          />
-        </g>
-
-        <g id="ondemand-video">
-          <path
-            d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"
-          ></path>
-        </g>
-
-        <g id="open-in-browser">
-          <path
-            d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"
-          />
-        </g>
-
-        <g id="open-in-new">
-          <path
-            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-          ></path>
-        </g>
-
-        <g id="performance">
-          <path
-            d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
-          />
-        </g>
-
-        <g id="realtimecommunication">
-          <path
-            d="M7 7.07L8.43 8.5c.91-.91 2.18-1.48 3.57-1.48s2.66.57 3.57 1.48L17 7.07C15.72 5.79 13.95 5 12 5s-3.72.79-5 2.07zM12 1C8.98 1 6.24 2.23 4.25 4.21l1.41 1.41C7.28 4 9.53 3 12 3s4.72 1 6.34 2.62l1.41-1.41C17.76 2.23 15.02 1 12 1zm2.86 9.01L9.14 10C8.51 10 8 10.51 8 11.14v9.71c0 .63.51 1.14 1.14 1.14h5.71c.63 0 1.14-.51 1.14-1.14v-9.71c.01-.63-.5-1.13-1.13-1.13zM15 20H9v-8h6v8z"
-          />
-        </g>
-
-        <g id="search">
-          <path
-            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-          ></path>
-        </g>
-
-        <g id="security">
-          <path
-            d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
-          />
-        </g>
-
-        <g id="share">
-          <path
-            d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
-          />
-        </g>
-
-        <g id="sort">
-          <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"></path>
-        </g>
-
-        <g id="star">
-          <path
-            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-          ></path>
-        </g>
-
-        <g id="star-border">
-          <path
-            d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
-          ></path>
-        </g>
-
-        <g id="timeline">
-          <path
-            d="M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2 2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02 9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z"
-          ></path>
-        </g>
-
-        <g id="warning">
-          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
-        </g>
-
-        <g id="webcomponents">
-          <path
-            d="M4.789 93.991l-4.729 1.434 5.791 21.344 7.857-1.939-1.901-7.173-3.288.545zM18.596 90.216l-5.08 1.498 5.47 21.024 46.586-12.477s12.905 20.666 32.426 21.882c19.502 1.203 34.941-8.369 42.164-18.933l-.787-3.858s-23.334 22.535-48.907 10.154c-16.098-8.611-21.716-18.395-21.716-18.395l-46.483 13.014-3.673-13.909zM121.677 38.66l-27.448 7.14-2.476 8.337 31.383-7.793z"
-          />
-        </g>
-
-        <g id="expand-less">
-          <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path>
-        </g>
-        <g id="expand-more">
-          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
-        </g>
-
-        <g id="more-vert">
-          <path
-            d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-          ></path>
-        </g>
-
-        <g id="error">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></path>
-        </g>
-      </defs>
-    </svg>
-  </iron-iconset-svg>
-`;
-
-render(template, document.body);
diff --git a/package-lock.json b/package-lock.json
index 19bfd4bff8e2..39464dd604ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,6 @@
       "dependencies": {
         "@lit/task": "^1.0.3",
         "@polymer/iron-collapse": "^3.0.1",
-        "@polymer/iron-icon": "^3.0.1",
-        "@polymer/iron-iconset-svg": "^3.0.1",
         "@types/google.accounts": "^0.0.18",
         "@types/google.visualization": "^0.0.74",
         "csv-parse": "^6.1.0",
diff --git a/package.json b/package.json
index 966bda368a0a..d63e52af1469 100644
--- a/package.json
+++ b/package.json
@@ -122,8 +122,6 @@
   "dependencies": {
     "@lit/task": "^1.0.3",
     "@polymer/iron-collapse": "^3.0.1",
-    "@polymer/iron-icon": "^3.0.1",
-    "@polymer/iron-iconset-svg": "^3.0.1",
     "@types/google.accounts": "^0.0.18",
     "@types/google.visualization": "^0.0.74",
     "dompurify": "^3.2.7",
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-linux.png
index b8f7a8ac0758..805bb7b5005b 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-mobile-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-mobile-linux.png
index 356473982075..90dbec5dff36 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-mobile-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-chromium-mobile-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-linux.png
index 5c28b3f50c9d..ed7d7dea1148 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-mobile-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-mobile-linux.png
index f91376c499b1..f0e719648df3 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-mobile-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-editall-page_pwtest.js/editall-page/edit-all-fields-firefox-mobile-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-linux.png
index 905c4fa15108..cc3b7925f85a 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-mobile-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-mobile-linux.png
index 3cae3d6a6dd7..4f9cdc7907d2 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-mobile-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-chromium-mobile-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-linux.png
index eb14c24fe4a1..18b2814561aa 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-mobile-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-mobile-linux.png
index 85cd8ce4a016..f05a8b90fdf5 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-mobile-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/create-new-feature/new-feature-created-firefox-mobile-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-chromium-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-chromium-linux.png
index 1c74b0cdbb9e..32c2b4207abf 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-chromium-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-chromium-linux.png differ
diff --git a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-firefox-linux.png b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-firefox-linux.png
index fbdc935f741b..9d7b7623c361 100644
Binary files a/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-firefox-linux.png and b/packages/playwright/tests/__screenshots__/chromedash-guide-new-page_pwtest.js/navigate-to-create-feature-page/new-feature-page-firefox-linux.png differ
diff --git a/pages/testdata/intentpreview_test/test_html_rendering.html b/pages/testdata/intentpreview_test/test_html_rendering.html
index 78e1f2a84c3f..6c5cee5e8a09 100644
--- a/pages/testdata/intentpreview_test/test_html_rendering.html
+++ b/pages/testdata/intentpreview_test/test_html_rendering.html
@@ -154,8 +154,8 @@ <h3>Copy and send this text for your "Intent to ..." email</h3>
     <span class="tooltip copy-text" style="float:right"
           title="Copy text to clipboard">
         <a href="#" data-tooltip>
-          <iron-icon icon="chromestatus:content_copy"
-                    id="copy-email-body"></iron-icon>
+          <sl-icon name="copy"
+                    id="copy-email-body"></sl-icon>
         </a>
     </span>
   </p>
diff --git a/static/shoelace/assets/icons/arrow-left.svg b/static/shoelace/assets/icons/arrow-left.svg
new file mode 100644
index 000000000000..587d4fec8efb
--- /dev/null
+++ b/static/shoelace/assets/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/bug.svg b/static/shoelace/assets/icons/bug.svg
new file mode 100644
index 000000000000..296ef3247fcf
--- /dev/null
+++ b/static/shoelace/assets/icons/bug.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
+  <path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A5 5 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A5 5 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623M4 7v4a4 4 0 0 0 3.5 3.97V7zm4.5 0v7.97A4 4 0 0 0 12 11V7zM12 6a4 4 0 0 0-1.334-2.982A3.98 3.98 0 0 0 8 2a3.98 3.98 0 0 0-2.667 1.018A4 4 0 0 0 4 6z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/caret-down-fill.svg b/static/shoelace/assets/icons/caret-down-fill.svg
new file mode 100644
index 000000000000..d7c3990ebdd9
--- /dev/null
+++ b/static/shoelace/assets/icons/caret-down-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+  <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/copy.svg b/static/shoelace/assets/icons/copy.svg
new file mode 100644
index 000000000000..b59068028b8f
--- /dev/null
+++ b/static/shoelace/assets/icons/copy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/exclamation-circle-fill.svg b/static/shoelace/assets/icons/exclamation-circle-fill.svg
new file mode 100644
index 000000000000..13ce7ab6bd96
--- /dev/null
+++ b/static/shoelace/assets/icons/exclamation-circle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/exclamation-triangle-fill.svg b/static/shoelace/assets/icons/exclamation-triangle-fill.svg
new file mode 100644
index 000000000000..52fd50886e9c
--- /dev/null
+++ b/static/shoelace/assets/icons/exclamation-triangle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
+  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/filter-left.svg b/static/shoelace/assets/icons/filter-left.svg
new file mode 100644
index 000000000000..bb1ee92a2021
--- /dev/null
+++ b/static/shoelace/assets/icons/filter-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filter-left" viewBox="0 0 16 16">
+  <path d="M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/graph-up.svg b/static/shoelace/assets/icons/graph-up.svg
new file mode 100644
index 000000000000..15e0bbf90da1
--- /dev/null
+++ b/static/shoelace/assets/icons/graph-up.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/puzzle.svg b/static/shoelace/assets/icons/puzzle.svg
new file mode 100644
index 000000000000..44903f7cbbfa
--- /dev/null
+++ b/static/shoelace/assets/icons/puzzle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-puzzle" viewBox="0 0 16 16">
+  <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.5.5 0 0 0-.115.118l-.012.025L6.5 4.5v.003l.003.01q.005.015.036.053a.9.9 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.9.9 0 0 0 .271-.194.2.2 0 0 0 .039-.063v-.009l-.012-.025a.5.5 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.5.5 0 0 0 .115-.118l.012-.025.001-.006v-.003a.2.2 0 0 0-.039-.064.9.9 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11s-.912.1-1.19.24a.9.9 0 0 0-.271.194.2.2 0 0 0-.039.063v.003l.001.006.012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.5.5 0 0 0-.118-.115l-.025-.012L1.5 6.5h-.003a.2.2 0 0 0-.064.039.9.9 0 0 0-.193.27C1.1 7.09 1 7.51 1 8s.1.912.24 1.19c.07.14.14.225.194.271a.2.2 0 0 0 .063.039H1.5l.006-.001.025-.012a.5.5 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115l.025.012.006.001h.003a.2.2 0 0 0 .064-.039.9.9 0 0 0 .193-.27c.14-.28.24-.7.24-1.191s-.1-.912-.24-1.19a.9.9 0 0 0-.194-.271.2.2 0 0 0-.063-.039H14.5l-.006.001-.025.012a.5.5 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/share.svg b/static/shoelace/assets/icons/share.svg
new file mode 100644
index 000000000000..bc62b9362729
--- /dev/null
+++ b/static/shoelace/assets/icons/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
+  <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/sign-stop.svg b/static/shoelace/assets/icons/sign-stop.svg
new file mode 100644
index 000000000000..49128dccc404
--- /dev/null
+++ b/static/shoelace/assets/icons/sign-stop.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sign-stop" viewBox="0 0 16 16">
+  <path d="M3.16 10.08c-.931 0-1.447-.493-1.494-1.132h.653c.065.346.396.583.891.583.524 0 .83-.246.83-.62 0-.303-.203-.467-.637-.572l-.656-.164c-.61-.147-.978-.51-.978-1.078 0-.706.597-1.184 1.444-1.184.853 0 1.386.475 1.436 1.087h-.645c-.064-.32-.352-.542-.797-.542-.472 0-.77.246-.77.6 0 .261.196.437.553.522l.654.161c.673.164 1.06.487 1.06 1.11 0 .736-.574 1.228-1.544 1.228Zm3.427-3.51V10h-.665V6.57H4.753V6h3.006v.568H6.587Z"/>
+  <path fill-rule="evenodd" d="M11.045 7.73v.544c0 1.131-.636 1.805-1.661 1.805-1.026 0-1.664-.674-1.664-1.805V7.73c0-1.136.638-1.807 1.664-1.807s1.66.674 1.66 1.807Zm-.674.547v-.553c0-.827-.422-1.234-.987-1.234-.572 0-.99.407-.99 1.234v.553c0 .83.418 1.237.99 1.237.565 0 .987-.408.987-1.237m1.15-2.276h1.535c.82 0 1.316.55 1.316 1.292 0 .747-.501 1.289-1.321 1.289h-.865V10h-.665zm1.436 2.036c.463 0 .735-.272.735-.744s-.272-.741-.735-.741h-.774v1.485z"/>
+  <path fill-rule="evenodd" d="M4.893 0a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353L11.46.146A.5.5 0 0 0 11.107 0zM1 5.1 5.1 1h5.8L15 5.1v5.8L10.9 15H5.1L1 10.9z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/star-fill.svg b/static/shoelace/assets/icons/star-fill.svg
new file mode 100644
index 000000000000..de09c4aa5751
--- /dev/null
+++ b/static/shoelace/assets/icons/star-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
+  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/star.svg b/static/shoelace/assets/icons/star.svg
new file mode 100644
index 000000000000..fcdcb1cf38e0
--- /dev/null
+++ b/static/shoelace/assets/icons/star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
+  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/icons/x-circle-fill.svg b/static/shoelace/assets/icons/x-circle-fill.svg
new file mode 100644
index 000000000000..4070fb35a073
--- /dev/null
+++ b/static/shoelace/assets/icons/x-circle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/>
+</svg>
\ No newline at end of file
diff --git a/static/shoelace/assets/material-icons/extension.svg b/static/shoelace/assets/material-icons/extension.svg
new file mode 100644
index 000000000000..0bb0a00ac348
--- /dev/null
+++ b/static/shoelace/assets/material-icons/extension.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#43A047"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
diff --git a/static/shoelace/assets/material-icons/pan-tool.svg b/static/shoelace/assets/material-icons/pan-tool.svg
new file mode 100644
index 000000000000..22ae727a5ca3
--- /dev/null
+++ b/static/shoelace/assets/material-icons/pan-tool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="20px" viewBox="0 0 24 24" width="20px" fill="#43A047"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M23,5.5V20c0,2.2-1.8,4-4,4h-7.3c-1.08,0-2.1-0.43-2.85-1.19L1,14.83c0,0,1.26-1.23,1.3-1.25 c0.22-0.19,0.49-0.29,0.79-0.29c0.22,0,0.42,0.06,0.6,0.16C3.73,13.46,8,15.91,8,15.91V4c0-0.83,0.67-1.5,1.5-1.5S11,3.17,11,4v7 h1V1.5C12,0.67,12.67,0,13.5,0S15,0.67,15,1.5V11h1V2.5C16,1.67,16.67,1,17.5,1S19,1.67,19,2.5V11h1V5.5C20,4.67,20.67,4,21.5,4 S23,4.67,23,5.5z"/></g></g></g></svg>
diff --git a/templates/admin/features/launch.html b/templates/admin/features/launch.html
index 3b40fcb18716..3a387396e55b 100644
--- a/templates/admin/features/launch.html
+++ b/templates/admin/features/launch.html
@@ -65,8 +65,8 @@ <h3>Copy and send this text for your "Intent to ..." email</h3>
     <span class="tooltip copy-text" style="float:right"
           title="Copy text to clipboard">
         <a href="#" data-tooltip>
-          <iron-icon icon="chromestatus:content_copy"
-                    id="copy-email-body"></iron-icon>
+          <sl-icon name="copy"
+                    id="copy-email-body"></sl-icon>
         </a>
     </span>
   </p>