Merge pull request #5150 from scherler:icon_size

PiperOrigin-RevId: 582411939
material-components · Nov 14, 2023 · 128abcb · 128abcb
2 parents 3e66c3e + b4c9b81
commit 128abcb
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/docs/components/icon.md b/docs/components/icon.md
@@ -141,8 +141,9 @@ If using SVG icons, add an `aria-label` attribute to the SVG element.
 Token            | Default value
 ---------------- | -----------------------------
 `--md-icon-font` | `'Material Symbols Outlined'`
+`--md-icon-size` | `24px`
 
-*   [All tokens](https://github.com/material-components/material-web/blob/main/icon/internal/_md-comp-icon.scss)
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon.scss)
     <!-- {.external} -->
 
 ### Example
@@ -157,13 +158,7 @@ Token            | Default value
 <style>
 md-icon {
   color: #006A6A;
-  font-size: 48px;
-}
-md-icon,
-md-icon > * {
-  /* Resizes any slotted images or SVGs */
-  width: 48px;
-  height: 48px;
+  --md-icon-size: 48px;
 }
 .rounded {
   --md-icon-font: 'Material Symbols Rounded';

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
@@ -27,15 +27,18 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-icon-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
+  }
 
   :host {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
+    font-size: map.get($tokens, 'size');
+    width: map.get($tokens, 'size');
+    height: map.get($tokens, 'size');
     color: inherit;
     font-variation-settings: inherit;
     font-weight: 400;
-    font-family: var(--md-icon-font, #{map.get($tokens, font)});
+    font-family: map.get($tokens, 'font');
     display: inline-flex;
     font-style: normal;
     line-height: 1;

diff --git a/tokens/_md-comp-icon.scss b/tokens/_md-comp-icon.scss
@@ -10,13 +10,15 @@
 $supported-tokens: (
   // go/keep-sorted start
   'font',
+  'size',
   // 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'),
+    size: if($exclude-hardcoded-values, null, 24px),
     // go/keep-sorted end
   );
 }