fix(icon,iconbutton,list)!: use material symbols for icons

- Material Symbols is recommended for M3
- Refactor list items to use md-icon directly

PiperOrigin-RevId: 511601359

icon/lib/_icon.scss

@@ -32,7 +32,7 @@ $_custom-property-prefix: 'icon';
     font-weight: var(--_weight);
     font-style: normal;
     font-size: var(--_size);
-    font-variation-settings: var(--_font-varation-settings);
+    font-variation-settings: var(--_font-variation-settings);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

icon/lib/_md-comp-icon.scss

@@ -7,8 +7,7 @@
   $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: if($exclude-hardcoded-values, null, 'Material Symbols Outlined'),
       font-variation-settings: if($exclude-hardcoded-values, null, inherit),
       size: if($exclude-hardcoded-values, null, 24px),
       weight: if($exclude-hardcoded-values, null, 400),

list/lib/icon/_list-item-icon.scss

@@ -10,6 +10,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../../icon/icon';
 @use '../../../sass/map-ext';
 @use '../../../sass/theme';
 // go/keep-sorted end
@@ -42,30 +43,13 @@ $_reference: (
   }
 
   .md3-list-item__icon {
-    color: var(--_list-item-icon-color);
+    @include icon.theme(
+      (
+        color: var(--_list-item-icon-color),
+        size: var(--_list-item-icon-size),
+      )
+    );
     opacity: var(--_list-item-icon-opacity);
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: var(--_list-item-icon-size);
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-flex;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    height: 100%;
-    width: 100%;
     padding-inline-start: 16px;
-
-    /* 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;
-    /* Support for IE. */
-    font-feature-settings: 'liga';
   }
 }

list/lib/icon/list-item-icon.ts

@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../../icon/icon.js';
+
 import {html, LitElement, TemplateResult} from 'lit';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemIcon extends LitElement {
   override render(): TemplateResult {
     return html`
-      <span class="md3-list-item__icon"><slot></slot></span>
+      <md-icon class="md3-list-item__icon"><slot></slot></md-icon>
     `;
   }
 }