From b8cba8650aba2ab1828d1ee46d5499dfa06e630c Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 27 Apr 2026 17:11:50 -0700
Subject: [PATCH] feat(labs): add expressive icon component

PiperOrigin-RevId: 906628230
---
 icon/internal/icon.ts                         |  2 +-
 labs/gb/components/fab/demo/stories.ts        |  2 +-
 labs/gb/components/iconbutton/demo/stories.ts |  2 +-
 labs/gb/components/list/demo/stories.ts       |  2 +-
 labs/gb/components/switch/demo/stories.ts     |  2 +-
 labs/gb/styles/icon/md-icon.scss              |  3 +-
 labs/gb/styles/icon/md-icon.ts                | 32 +++++++++++++++++++
 7 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 labs/gb/styles/icon/md-icon.ts

diff --git a/icon/internal/icon.ts b/icon/internal/icon.ts
index 17d70327ab..18fbbe92ae 100644
--- a/icon/internal/icon.ts
+++ b/icon/internal/icon.ts
@@ -7,7 +7,7 @@
 import {html, LitElement} from 'lit';
 
 /**
- * TODO(b/265336902): add docs
+ * An icon element.
  */
 export class Icon extends LitElement {
   protected override render() {
diff --git a/labs/gb/components/fab/demo/stories.ts b/labs/gb/components/fab/demo/stories.ts
index 898368d2c6..b6c4a50154 100644
--- a/labs/gb/components/fab/demo/stories.ts
+++ b/labs/gb/components/fab/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/labs/gb/components/fab/md-fab.js';
+import '@material/web/labs/gb/styles/icon/md-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {FabColor, FabSize} from '@material/web/labs/gb/components/fab/fab.js';
diff --git a/labs/gb/components/iconbutton/demo/stories.ts b/labs/gb/components/iconbutton/demo/stories.ts
index d245d608a9..817dd31dea 100644
--- a/labs/gb/components/iconbutton/demo/stories.ts
+++ b/labs/gb/components/iconbutton/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/labs/gb/components/iconbutton/md-icon-button.js';
+import '@material/web/labs/gb/styles/icon/md-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {
diff --git a/labs/gb/components/list/demo/stories.ts b/labs/gb/components/list/demo/stories.ts
index 46442d248a..082b4c59d9 100644
--- a/labs/gb/components/list/demo/stories.ts
+++ b/labs/gb/components/list/demo/stories.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/labs/gb/components/list/md-list.js';
 import '@material/web/labs/gb/components/list/md-list-item.js';
+import '@material/web/labs/gb/styles/icon/md-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {styles as checkboxStyles} from '@material/web/labs/gb/components/checkbox/checkbox.cssresult.js';
diff --git a/labs/gb/components/switch/demo/stories.ts b/labs/gb/components/switch/demo/stories.ts
index 4fccbc2f7a..e1042ec8be 100644
--- a/labs/gb/components/switch/demo/stories.ts
+++ b/labs/gb/components/switch/demo/stories.ts
@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/icon/icon.js';
 import '@material/web/labs/gb/components/switch/md-switch.js';
+import '@material/web/labs/gb/styles/icon/md-icon.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
diff --git a/labs/gb/styles/icon/md-icon.scss b/labs/gb/styles/icon/md-icon.scss
index 5660ffe8a7..4a421136e6 100644
--- a/labs/gb/styles/icon/md-icon.scss
+++ b/labs/gb/styles/icon/md-icon.scss
@@ -40,7 +40,8 @@
 }
 
 @layer md.sys.icon {
-  .md-icon {
+  .md-icon,
+  :host(.md-icon) {
     display: inline-flex;
     place-items: center;
     place-content: center;
diff --git a/labs/gb/styles/icon/md-icon.ts b/labs/gb/styles/icon/md-icon.ts
new file mode 100644
index 0000000000..09ce2984be
--- /dev/null
+++ b/labs/gb/styles/icon/md-icon.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {type CSSResultOrNative} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {Icon as IconBase} from '../../../../icon/internal/icon.js';
+
+import iconStyles from './md-icon.css' with {type: 'css'}; // github-only
+// import iconStyles from './md-icon.cssresult.js'; // google3-only
+
+declare global {
+  interface HTMLElementTagNameMap {
+    /** A Material Design icon component. */
+    'md-icon': Icon;
+  }
+}
+
+/**
+ * A Material Design icon component.
+ */
+@customElement('md-icon')
+export class Icon extends IconBase {
+  static override styles: CSSResultOrNative[] = [iconStyles];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.classList.add('md-icon');
+  }
+}