refactor(icon)!: remove css custom props from icon and apply values d…

…irectly on host BREAKING CHANGE: Remove css custom properties from icon and prefer applying normal css properties on host except for font-family. PiperOrigin-RevId: 553577562
material-components · Aug 3, 2023 · ff60a88 · ff60a88
1 parent 65bc8f4
commit ff60a88
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 111 deletions.
diff --git a/docs/components/icon.md b/docs/components/icon.md
@@ -94,7 +94,7 @@ Load the font with
 <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp" rel="stylesheet">
 ```
 
-To use Sharp icons, set `--md-icon-font` to `'Material Symbols Sharp'`.
+To use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.
 
 ### Fill
 
@@ -109,7 +109,7 @@ filled. Along with weight, fill is a primary attribute that impacts the overall
 look of a symbol.
 
 All styles of Material Symbols can be filled by setting
-`--md-icon-font-variation-settings` to `'FILL' 1`.
+`font-variation-settings` to `'FILL' 1`.
 
 ## Accessibility
 
@@ -138,13 +138,9 @@ If using SVG icons, add an `aria-label` attribute to the SVG element.
 
 ### Tokens
 
-Token                               | Default value
------------------------------------ | -----------------------------
-`--md-icon-color`                   | `inherit`
-`--md-icon-font`                    | `'Material Symbols Outlined'`
-`--md-icon-font-variation-settings` | `inherit`
-`--md-icon-size`                    | `24px`
-`--md-icon-weight`                  | `400`
+Token            | Default value
+---------------- | -----------------------------
+`--md-icon-font` | `'Material Symbols Outlined'`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/icon/internal/_md-comp-icon.scss)
     <!-- {.external} -->
@@ -159,9 +155,15 @@ Token                               | Default value
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,[email protected],100..700,0..1" rel="stylesheet">
 
 <style>
-:root {
-  --md-icon-color: #006A6A;
-  --md-icon-size: 48px;
+md-icon {
+  color: #006A6A;
+  font-size: 48px;
+}
+md-icon,
+md-icon > * {
+  /* Resizes any slotted images or SVGs */
+  width: 48px;
+  height: 48px;
 }
 .rounded {
   --md-icon-font: 'Material Symbols Rounded';
@@ -170,7 +172,7 @@ Token                               | Default value
   --md-icon-font: 'Material Symbols Sharp';
 }
 md-icon[filled] {
-  --md-icon-font-variation-settings: 'FILL' 1;
+  font-variation-settings: 'FILL' 1;
 }
 </style>
 

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
@@ -5,34 +5,35 @@
 
 // go/keep-sorted start
 @use '../../internal/sass/theme';
-@use './md-comp-icon';
+@use '../../tokens';
+@use 'sass:map';
 // go/keep-sorted end
 
 $_custom-property-prefix: 'icon';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-icon.values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $tokens: theme.validate-theme(tokens.md-comp-icon-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    @if $value {
+      --md-icon-#{$token}: #{$value};
+    }
+  }
 }
 
 @mixin styles() {
-  $tokens: md-comp-icon.values();
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+  $tokens: tokens.md-comp-icon-values();
 
   :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    color: inherit;
+    font-variation-settings: inherit;
+    font-weight: 400;
+    font-family: var(--md-icon-font, #{map.get($tokens, font)});
     display: inline-flex;
-    color: var(--_color);
-    font-family: var(--_font);
-    font-weight: var(--_weight);
     font-style: normal;
-    font-size: var(--_size);
-    font-variation-settings: var(--_font-variation-settings);
     line-height: 1;
     // Avoid displaying overflowing text if font ligatures have not loaded.
     overflow: hidden;
@@ -54,7 +55,7 @@ $_custom-property-prefix: 'icon';
   }
 
   ::slotted(*) {
-    height: var(--_size);
-    width: var(--_size);
+    height: 100%;
+    width: 100%;
   }
 }
diff --git a/icon/internal/_md-comp-icon.scss b/icon/internal/_md-comp-icon.scss
diff --git a/iconbutton/internal/_shared.scss b/iconbutton/internal/_shared.scss
@@ -61,15 +61,12 @@
   }
 
   .icon {
-    height: var(--_icon-size);
-    width: var(--_icon-size);
-
-    @include icon.theme(
-      (
-        size: var(--_icon-size),
-        weight: inherit,
-      )
-    );
+    ::slotted(*) {
+      font-size: var(--_icon-size);
+      height: var(--_icon-size);
+      width: var(--_icon-size);
+      font-weight: inherit;
+    }
   }
 
   md-ripple {

diff --git a/list/internal/listitem/_list-item.scss b/list/internal/listitem/_list-item.scss
@@ -262,13 +262,15 @@
 }
 
 @mixin _icon() {
+  ::slotted(*) {
+    fill: currentColor;
+  }
+
   slot[name='start']::slotted([data-variant='icon']) {
-    @include icon.theme(
-      (
-        color: var(--_list-item-leading-icon-color),
-        size: var(--_list-item-leading-icon-size),
-      )
-    );
+    font-size: var(--_list-item-leading-icon-size);
+    width: var(--_list-item-leading-icon-size);
+    height: var(--_list-item-leading-icon-size);
+    color: var(--_list-item-leading-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
@@ -282,12 +284,10 @@
   }
 
   slot[name='end']::slotted([data-variant='icon']) {
-    @include icon.theme(
-      (
-        color: var(--_list-item-trailing-icon-color),
-        size: var(--_list-item-trailing-icon-size),
-      )
-    );
+    font-size: var(--_list-item-trailing-icon-size);
+    width: var(--_list-item-trailing-icon-size);
+    height: var(--_list-item-trailing-icon-size);
+    color: var(--_list-item-trailing-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
@@ -302,77 +302,43 @@
 
   :hover {
     slot[name='start']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-hover-leading-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-hover-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-hover-trailing-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-hover-trailing-icon-icon-color);
     }
   }
 
   :focus {
     slot[name='start']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-focus-leading-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-focus-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-focus-trailing-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-focus-trailing-icon-icon-color);
     }
   }
 
   :active {
     slot[name='start']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-pressed-leading-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-pressed-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      @include icon.theme(
-        (
-          color: var(--_list-item-pressed-trailing-icon-icon-color),
-        )
-      );
+      color: var(--_list-item-pressed-trailing-icon-icon-color);
     }
   }
 
   .disabled {
     slot[name='start']::slotted([data-variant='icon']) {
       opacity: var(--_list-item-disabled-leading-icon-opacity);
-
-      @include icon.theme(
-        (
-          color: var(--_list-item-disabled-leading-icon-color),
-        )
-      );
+      color: var(--_list-item-disabled-leading-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
       opacity: var(--_list-item-disabled-trailing-icon-opacity);
-
-      @include icon.theme(
-        (
-          color: var(--_list-item-disabled-trailing-icon-color),
-        )
-      );
+      color: var(--_list-item-disabled-trailing-icon-color);
     }
   }
 }

diff --git a/tokens/_index.scss b/tokens/_index.scss
@@ -26,6 +26,7 @@
 @forward './md-comp-filter-chip' as md-comp-filter-chip-*;
 @forward './md-comp-focus-ring' as md-comp-focus-ring-*;
 @forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;
+@forward './md-comp-icon' as md-comp-icon-*;
 @forward './md-comp-icon-button' as md-comp-icon-button-*;
 @forward './md-comp-input-chip' as md-comp-input-chip-*;
 @forward './md-comp-linear-progress-indicator' as

diff --git a/tokens/_md-comp-icon.scss b/tokens/_md-comp-icon.scss
@@ -0,0 +1,32 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'font',
+  // go/keep-sorted end
+);
+
+@function _get-new-tokens($exclude-hardcoded-values) {
+  @return (
+    // go/keep-sorted start
+    font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
+    // go/keep-sorted end
+  );
+}
+
+@function values($exclude-hardcoded-values: false) {
+  $tokens: values.validate(
+    (),
+    $supported-tokens: $supported-tokens,
+    $new-tokens: _get-new-tokens($exclude-hardcoded-values)
+  );
+
+  @return $tokens;
+}