feat(chips): add filter chip selected-icon slot to customize checkmark

PiperOrigin-RevId: 589186323
material-components · Dec 8, 2023 · 89b4c2e · 89b4c2e
1 parent c4cbd36
commit 89b4c2e
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
@@ -25,6 +25,15 @@ export class FilterChip extends MultiActionChip {
   @property({type: Boolean}) removable = false;
   @property({type: Boolean, reflect: true}) selected = false;
 
+  /**
+   * Only needed for SSR.
+   *
+   * Add this attribute when a filter chip has a `slot="selected-icon"` to avoid
+   * a Flash Of Unstyled Content.
+   */
+  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})
+  hasSelectedIcon = false;
+
   protected get primaryId() {
     return 'button';
   }
@@ -65,10 +74,12 @@ export class FilterChip extends MultiActionChip {
     }
 
     return html`
-      <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
-        <path
-          d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
-      </svg>
+      <slot name="selected-icon">
+        <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+          <path
+            d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+        </svg>
+      </slot>
     `;
   }