feat(labs): add expressive icon component

PiperOrigin-RevId: 906605113

Author: asyncliz

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() {

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';

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 {

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';

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';

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;

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');
+  }
+}