feat(icon): Implement tokens for md-icon

Adds tokens for color, size, font-family, font-weight and font-variation-settings.

Slotted svg icons will also be sized and colored with the tokens.

PiperOrigin-RevId: 495716570

icon/_icon.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/icon' show theme;

icon/lib/_icon.scss

@@ -0,0 +1,54 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use '../../sass/theme';
+@use './md-comp-icon';
+
+$_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);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-icon.values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    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-varation-settings);
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  span ::slotted(svg) {
+    fill: currentColor;
+    height: var(--_size);
+    width: var(--_size);
+  }
+}

icon/lib/_md-comp-icon.scss

@@ -0,0 +1,19 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@function values($exclude-hardcoded-values: false) {
+  $values: (
+    (
+      color: if($exclude-hardcoded-values, null, inherit),
+      // TODO(b/225384738): Change to 'Material Symbols Outlined'
+      font: if($exclude-hardcoded-values, null, 'Material Icons'),
+      font-variation-settings: if($exclude-hardcoded-values, null, inherit),
+      size: if($exclude-hardcoded-values, null, 24px),
+      weight: if($exclude-hardcoded-values, null, 400),
+    )
+  );
+
+  @return $values;
+}

icon/lib/icon-styles.scss

@@ -3,23 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-:host {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
+@use './icon';
 
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-}
+@include icon.styles;