feat(list): Created a separate style module for icon web component in…

… list

PiperOrigin-RevId: 461809487

list/lib/_list-item.scss

@@ -34,10 +34,6 @@
   .md3-list-item--with-leading-video {
     @include video-item-root;
   }
-
-  .md3-list-item__icon {
-    @include icon-root;
-  }
 }
 
 @mixin host-root() {
@@ -109,28 +105,3 @@
     padding-inline-start: 0;
   }
 }
-
-@mixin icon-root() {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: inherit;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  height: 100%;
-  width: 100%;
-
-  /* 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.scss

@@ -0,0 +1,34 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-list-item__icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: inherit;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    height: 100%;
+    width: 100%;
+
+    /* 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-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './list-item-icon';
+
+:host {
+  @include list-item-icon.static-styles();
+}

list/list-item-icon.ts

@@ -6,8 +6,8 @@
 
 import {customElement} from 'lit/decorators';
 
-import {ListItemIcon} from './lib/list-item-icon';
-import {styles} from './lib/list-item-styles.css';
+import {ListItemIcon} from './lib/icon/list-item-icon';
+import {styles} from './lib/icon/list-item-icon-styles.css';
 
 declare global {
   interface HTMLElementTagNameMap {