@operato/input 2.0.0-alpha.59 → 2.0.0-alpha.62

package/src/ox-input-search.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import debounce from 'lodash-es/debounce'
 import { css, html } from 'lit'
@@ -19,7 +19,7 @@ export class OxInputSearch extends OxFormField {
         position: relative;
         align-items: center;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
       }
 
       [type='text'] {
@@ -38,7 +38,7 @@ export class OxInputSearch extends OxFormField {
         border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         color: var(--secondary-color);
       }
@@ -54,7 +54,7 @@ export class OxInputSearch extends OxFormField {
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
+      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>
       <input
         type="text"
         .value=${this.value || ''}

package/src/ox-input-table.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@polymer/paper-item/paper-item'
 import '@operato/i18n/ox-i18n.js'
@@ -74,7 +74,7 @@ class OxInputTable extends OxFormField {
           line-height: 1.5;
         }
 
-        #border-set > mwc-icon {
+        #border-set > md-icon {
           grid-column: span 2;
           margin: 0 0 0 8px;
           width: 32px;
@@ -216,16 +216,16 @@ class OxInputTable extends OxFormField {
           border-style-btn"
           @click=${(e: Event) => this._onClickType(e)}
         >
-          <mwc-icon data-value="out">border_outer</mwc-icon>
-          <mwc-icon data-value="in">border_inner</mwc-icon>
-          <mwc-icon data-value="all">border_all</mwc-icon>
-          <mwc-icon data-value="left">border_left</mwc-icon>
-          <mwc-icon data-value="center">border_vertical</mwc-icon>
-          <mwc-icon data-value="right">border_right</mwc-icon>
-          <mwc-icon data-value="top">border_top</mwc-icon>
-          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
-          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
-          <mwc-icon data-value="clear">border_clear</mwc-icon>
+          <md-icon data-value="out">border_outer</md-icon>
+          <md-icon data-value="in">border_inner</md-icon>
+          <md-icon data-value="all">border_all</md-icon>
+          <md-icon data-value="left">border_left</md-icon>
+          <md-icon data-value="center">border_vertical</md-icon>
+          <md-icon data-value="right">border_right</md-icon>
+          <md-icon data-value="top">border_top</md-icon>
+          <md-icon data-value="middle">border_horizontal</md-icon>
+          <md-icon data-value="bottom">border_bottom</md-icon>
+          <md-icon data-value="clear">border_clear</md-icon>
         </div>
 
         <div class="property-grid">

package/src/ox-input-unit-number.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -217,7 +217,7 @@ export class OxInputUnitNumber extends OxFormField {
         min-width: 24px;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 18px;
         color: var(--primary-color, #3c3938);
         margin-left: auto;
@@ -272,7 +272,7 @@ export class OxInputUnitNumber extends OxFormField {
           <div option value=${this.stdUnit}>${this.stdUnit}</div>
           ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
         </ox-popup-list>
-        <mwc-icon>expand_more</mwc-icon>
+        <md-icon>expand_more</md-icon>
       </div>
     `
   }

package/src/ox-input-value-map.ts

@@ -63,9 +63,7 @@ export class OxInputValueMap extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -144,17 +142,17 @@ export class OxInputValueMap extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -170,7 +168,7 @@ export class OxInputValueMap extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -185,7 +183,7 @@ export class OxInputValueMap extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
@@ -196,7 +194,7 @@ export class OxInputValueMap extends OxFormField {
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${() => this._sort()} tabindex="-1">
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </div>
     `

package/src/ox-input-value-ranges.ts

@@ -63,9 +63,7 @@ export class OxInputValueRange extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -153,17 +151,17 @@ export class OxInputValueRange extends OxFormField {
           />
         `
       : this.valuetype == 'color'
-      ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
-      : html`
-          <input
-            type="text"
-            data-value
-            placeholder="value"
-            value=${ifDefined(value)}
-            data-value-type=${this.valuetype}
-            ?disabled=${this.disabled}
-          />
-        `
+        ? html` <ox-input-color data-value value=${ifDefined(value)} ?disabled=${this.disabled}> </ox-input-color> `
+        : html`
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              value=${ifDefined(value)}
+              data-value-type=${this.valuetype}
+              ?disabled=${this.disabled}
+            />
+          `
   }
 
   render() {
@@ -181,7 +179,7 @@ export class OxInputValueRange extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -197,7 +195,7 @@ export class OxInputValueRange extends OxFormField {
 
                 ${this.valueInputTemplate()}
                 <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                  <mwc-icon>add</mwc-icon>
+                  <md-icon>add</md-icon>
                 </button>
               </div>
             `
@@ -209,7 +207,7 @@ export class OxInputValueRange extends OxFormField {
 
         ${this.valueInputTemplate((this.value && this.value.default) || this._defaultValue())}
         <button class="record-action" @click=${(e: Event) => this._sort()} ?disabled=${this.disabled}>
-          <mwc-icon>chevron_right</mwc-icon>
+          <md-icon>chevron_right</md-icon>
         </button>
       </div>
     `

package/src/ox-input-work-shift.ts

@@ -94,9 +94,6 @@ export class OxInputWorkShift extends OxFormField {
       color: var(--button-color);
       cursor: pointer;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -156,7 +153,7 @@ export class OxInputWorkShift extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -182,7 +179,7 @@ export class OxInputWorkShift extends OxFormField {
               <input type="time" data-to-time step="1800" />
 
               <button class="record-action" @click=${(e: Event) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
             </div>
           `}

package/src/ox-select.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, PropertyValues } from 'lit'
@@ -58,7 +58,7 @@ export class Select extends OxFormField {
         white-space: nowrap;
       }
 
-      mwc-icon {
+      md-icon {
         display: block;
         width: 24px;
         text-align: right;
@@ -67,7 +67,7 @@ export class Select extends OxFormField {
         opacity: 0.7;
       }
 
-      div:hover mwc-icon {
+      div:hover md-icon {
         color: var(--primary-color);
       }
 
@@ -92,7 +92,7 @@ export class Select extends OxFormField {
     return html`
       <div @click=${this.expand}>
         <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
-        <mwc-icon>expand_more</mwc-icon>
+        <md-icon>expand_more</md-icon>
       </div>
 
       <slot></slot>

package/stories/ox-input-3axis.stories.ts

@@ -25,7 +25,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-input-3dish.stories.ts

@@ -27,7 +27,20 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
   <style>
     body {
     }

package/stories/ox-input-angle.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-barcode.stories.ts

@@ -41,7 +41,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     #root {
       height: 500px;

package/stories/ox-input-code.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-crontab.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-data.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-duration.stories.ts

@@ -27,7 +27,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-file.stories.ts

@@ -48,7 +48,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-hashtags.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-i18n-label.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'values', value, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-key-values.stories.ts

@@ -28,7 +28,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-mass-fraction.stories.ts

@@ -36,7 +36,19 @@ const Template: Story<ArgTypes> = ({
   disabled
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }

package/stories/ox-input-multiple-colors.stories.ts

@@ -22,7 +22,18 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
   <style>
     body {
@@ -99,15 +110,15 @@ const Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`
       --icon-default-color: var(--theme-white-color);
 
       /* material design component themes */
-      --mdc-theme-on-primary: var(--theme-white-color);
-      --mdc-theme-primary: var(--secondary-text-color);
-      --mdc-theme-on-secondary: var(--theme-white-color);
-      --mdc-theme-secondary: var(--primary-color);
-      --mdc-button-outline-color: var(--primary-color);
-      --mdc-danger-button-primary-color: var(--status-danger-color);
-      --mdc-danger-button-outline-color: var(--status-danger-color);
-      --mdc-button-outline-width: 1px;
-      --mdc-button-horizontal-padding: 16px;
+      --md-theme-on-primary: var(--theme-white-color);
+      --md-theme-primary: var(--secondary-text-color);
+      --md-theme-on-secondary: var(--theme-white-color);
+      --md-theme-secondary: var(--primary-color);
+      --md-button-outline-color: var(--primary-color);
+      --md-danger-button-primary-color: var(--status-danger-color);
+      --md-danger-button-outline-color: var(--status-danger-color);
+      --md-button-outline-width: 1px;
+      --md-button-horizontal-padding: 16px;
 
       /* button style */
       --button-background-color: #fafbfc;

package/stories/ox-input-options.stories.ts

@@ -26,7 +26,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
   <style>
     body {
     }