Upgrade feature-table icons to shoelace. (#2371)

* Upgrade feature-table icons to shoelace.

* Update client-src/elements/chromedash-feature-table.js

Co-authored-by: Kyle Ju <kyleju@google.com>

* Use material icons instead of bootstrap icons.

Co-authored-by: Kyle Ju <kyleju@google.com>

client-src/elements/chromedash-feature-table.js

@@ -134,13 +134,11 @@ class ChromedashFeatureTable extends LitElement {
         color: var(--unimportant-text-color);
         padding: var(--content-padding-quarter);
       }
-      iron-icon {
-        --iron-icon-height: 18px;
-        --iron-icon-width: 18px;
-        color: var(--link-color);
+      sl-icon-button {
+        font-size: 1.3rem;
       }
-      iron-icon:hover {
-        color: var(--link-hover-color);
+      sl-icon-button::part(base) {
+        color: var(--link-color);
       }
       button {
         border: var(--default-border);
@@ -207,35 +205,30 @@ class ChromedashFeatureTable extends LitElement {
 
   renderApprovalsIcon(feature) {
     return html`
-      <a class="tooltip"
+      <sl-icon-button
         @click="${() => this.openApprovalsDialog(feature)}"
-        title="Review approvals">
-        <iron-icon icon="chromestatus:approval"></iron-icon>
-      </a>
+        title="Review approvals"
+        library="material" name="approval"></sl-icon-button>
     `;
   }
 
   renderEditIcon(feature) {
     return html`
-      <a href="/guide/edit/${feature.id}" class="tooltip"
-        title="Edit feature">
-        <iron-icon icon="chromestatus:create"></iron-icon>
-      </a>
+      <sl-icon-button href="/guide/edit/${feature.id}"
+        title="Edit feature"
+        name="pencil-fill"></sl-icon-button>
     `;
   }
 
   renderStarIcon(feature) {
     return html`
-      <a href="#" class="tooltip" data-tooltip @click=${this.toggleStar}
-        title="Receive an email notification when there are updates">
-        <iron-icon
-          icon="${this.starredFeatures.has(Number(feature.id)) ?
-          'chromestatus:star' :
-          'chromestatus:star-border'}"
-          class="pushicon"
-          data-feature-id="${feature.id}">
-        </iron-icon>
-      </a>
+      <sl-icon-button
+        @click=${this.toggleStar}
+        title="Receive an email notification when there are updates"
+        library="material"
+        name="${this.starredFeatures.has(Number(feature.id)) ?
+                'star' : 'star_border'}"
+        data-feature-id="${feature.id}"></sl-icon-button>
     `;
   }
 

static/shoelace/assets/icons/pencil-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+  <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+</svg>

static/shoelace/assets/material-icons/approval.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><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"/></g></g></svg>

static/shoelace/assets/material-icons/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0 0h24v24H0V0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/></g><g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></g></svg>

static/shoelace/assets/material-icons/star_border.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><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"/></svg>