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

labs/gb/styles/m3.scss

@@ -9,5 +9,6 @@
 @import 'icon/md-icon';
 @import 'motion/md-motion-tokens-easing';
 @import 'shape/md-shape-tokens';
+@import 'space/md-space-tokens';
 @import 'typography/md-typography-tokens';
 // go/keep-sorted end

labs/gb/styles/space/md-space-tokens.scss

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys.space {
+  :root {
+    --md-sys-space-unit: 8px;
+    --md-sys-space-0: calc(var(--md-sys-space-unit) * 0);
+    --md-sys-space-25: calc(var(--md-sys-space-unit) * 0.25);
+    --md-sys-space-50: calc(var(--md-sys-space-unit) * 0.5);
+    --md-sys-space-75: calc(var(--md-sys-space-unit) * 0.75);
+    --md-sys-space-100: var(--md-sys-space-unit);
+    --md-sys-space-125: calc(var(--md-sys-space-unit) * 1.25);
+    --md-sys-space-150: calc(var(--md-sys-space-unit) * 1.5);
+    --md-sys-space-175: calc(var(--md-sys-space-unit) * 1.75);
+    --md-sys-space-200: calc(var(--md-sys-space-unit) * 2);
+    --md-sys-space-250: calc(var(--md-sys-space-unit) * 2.5);
+    --md-sys-space-300: calc(var(--md-sys-space-unit) * 3);
+    --md-sys-space-400: calc(var(--md-sys-space-unit) * 4);
+    --md-sys-space-450: calc(var(--md-sys-space-unit) * 4.5);
+    --md-sys-space-500: calc(var(--md-sys-space-unit) * 5);
+    --md-sys-space-600: calc(var(--md-sys-space-unit) * 6);
+    --md-sys-space-700: calc(var(--md-sys-space-unit) * 7);
+    --md-sys-space-800: calc(var(--md-sys-space-unit) * 8);
+    --md-sys-space-900: calc(var(--md-sys-space-unit) * 9);
+  }
+}

labs/gb/styles/tailwind.scss

@@ -135,7 +135,7 @@
   --shadow-2xl: initial; // Material does not have a 2xl shadow.
 
   // Space
-  --spacing: 8px;
+  --spacing: var(--md-sys-space-unit);
 
   // Breakpoints
   --breakpoint-sm: 600px; // medium