From 8467d40bf123058bc876970958f6c7803d50b368 Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Thu, 2 Nov 2023 20:43:40 +0100
Subject: [PATCH 1/5] [icon_size] add size to tokens

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 icon/internal/_icon.scss  | 5 ++++-
 tokens/_md-comp-icon.scss | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
index 1f819df25c..92aa87cc5c 100644
--- a/icon/internal/_icon.scss
+++ b/icon/internal/_icon.scss
@@ -27,9 +27,12 @@
 
 @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;
+    font-size: var(--md-icon-size, #{map.get($tokens, size)});
     width: 24px;
     height: 24px;
     color: inherit;
diff --git a/tokens/_md-comp-icon.scss b/tokens/_md-comp-icon.scss
index 07409528f4..bfabe1f649 100644
--- a/tokens/_md-comp-icon.scss
+++ b/tokens/_md-comp-icon.scss
@@ -10,6 +10,7 @@
 $supported-tokens: (
   // go/keep-sorted start
   'font',
+  'size',
   // go/keep-sorted end
 );
 
@@ -17,6 +18,7 @@ $supported-tokens: (
   @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
   );
 }

From 2d1afaa793ccc8318ee8f6da71b0d0a91d5f351f Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Fri, 3 Nov 2023 10:19:21 +0100
Subject: [PATCH 2/5] [icon_size] fix expression

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 icon/internal/_icon.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
index 92aa87cc5c..451d33a2a9 100644
--- a/icon/internal/_icon.scss
+++ b/icon/internal/_icon.scss
@@ -32,13 +32,13 @@
   }
 
   :host {
-    font-size: var(--md-icon-size, #{map.get($tokens, size)});
+    font-size: map.get($tokens, size);
     width: 24px;
     height: 24px;
     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;

From 65baa1af64d9b6155b1d56e0ed1b63b69053902f Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Fri, 3 Nov 2023 12:11:02 +0100
Subject: [PATCH 3/5] [icon_size] drop fixed height and width

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 icon/internal/_icon.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
index 451d33a2a9..fb1000d645 100644
--- a/icon/internal/_icon.scss
+++ b/icon/internal/_icon.scss
@@ -33,8 +33,6 @@
 
   :host {
     font-size: map.get($tokens, size);
-    width: 24px;
-    height: 24px;
     color: inherit;
     font-variation-settings: inherit;
     font-weight: 400;

From 57cec62ea27b88d731079c541013d3a0774a4222 Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Fri, 3 Nov 2023 14:15:48 +0100
Subject: [PATCH 4/5] [icon_size] add note to the docu about the featuere

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 docs/components/icon.md | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/docs/components/icon.md b/docs/components/icon.md
index 4a02f7fca3..54227dfad9 100644
--- 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';

From b4c9b81eb3f277e8a9f0b8fe6755103b27829162 Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Tue, 14 Nov 2023 13:27:55 +0100
Subject: [PATCH 5/5] [icon_size] fix code regarding feedback

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 icon/internal/_icon.scss  | 6 ++++--
 tokens/_md-comp-icon.scss | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/icon/internal/_icon.scss b/icon/internal/_icon.scss
index fb1000d645..d2147e902d 100644
--- a/icon/internal/_icon.scss
+++ b/icon/internal/_icon.scss
@@ -32,11 +32,13 @@
   }
 
   :host {
-    font-size: map.get($tokens, size);
+    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: 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
index bfabe1f649..dd924feb6c 100644
--- a/tokens/_md-comp-icon.scss
+++ b/tokens/_md-comp-icon.scss
@@ -18,7 +18,7 @@ $supported-tokens: (
   @return (
     // go/keep-sorted start
     font: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
-    size: if($exclude-hardcoded-values, null, '24px'),
+    size: if($exclude-hardcoded-values, null, 24px),
     // go/keep-sorted end
   );
 }