ADDED: icon component

CHANGED: in everything, where use icons (except switch and checkbox), change from icon-font to Icon component

.idea/workspace.xml

@@ -4,30 +4,49 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="UPDATE: README.md">
+    <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="ADDED: opportunity align to the center ripple for all components that have ripple effect">
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/checkbox-layout.types.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.types.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.types.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/styles/icon.sass" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/components/buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/buttons.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/components/checkboxes.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/checkboxes.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/components/fabs.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/fabs.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/components/icon-buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/icon-buttons.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/components/radios.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/radios.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/components/switches.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/switches.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/layout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/dist/output.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/output.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/dist/styles/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/styles/styles.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button-layout.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button.types.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/check-box-skeleton.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple-area.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/ripple/ripple.types.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/checkbox.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fonts.css" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fonts.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fonts.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.sass" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -37,8 +56,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="Sass File" />
         <option value="TypeScript JSX File" />
+        <option value="Sass File" />
         <option value="TypeScript File" />
       </list>
     </option>
@@ -194,15 +213,9 @@
       <workItem from="1706426744715" duration="17520000" />
       <workItem from="1706516378911" duration="15403000" />
       <workItem from="1706552378046" duration="8738000" />
-      <workItem from="1706598284665" duration="4149000" />
+      <workItem from="1706598284665" duration="4240000" />
-    </task>
+      <workItem from="1706617852695" duration="6530000" />
-    <task id="LOCAL-00024" summary="other updates...">
+      <workItem from="1706629691514" duration="13025000" />
-      <option name="closed" value="true" />
-      <created>1704526668819</created>
-      <option name="number" value="00024" />
-      <option name="presentableId" value="LOCAL-00024" />
-      <option name="project" value="LOCAL" />
-      <updated>1704526668819</updated>
     </task>
     <task id="LOCAL-00025" summary="added radio component">
       <option name="closed" value="true" />
@@ -588,7 +601,15 @@
       <option name="project" value="LOCAL" />
       <updated>1706562164219</updated>
     </task>
-    <option name="localTasksCounter" value="73" />
+    <task id="LOCAL-00073" summary="ADDED: opportunity align to the center ripple for all components that have ripple effect">
+      <option name="closed" value="true" />
+      <created>1706603599586</created>
+      <option name="number" value="00073" />
+      <option name="presentableId" value="LOCAL-00073" />
+      <option name="project" value="LOCAL" />
+      <updated>1706603599586</updated>
+    </task>
+    <option name="localTasksCounter" value="74" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -606,7 +627,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="added sass style sheet file for fabs" />
     <MESSAGE value="updated button styles and renaming button component file" />
     <MESSAGE value="updated checkbox styles" />
     <MESSAGE value="updated styles for preview page" />
@@ -631,6 +651,7 @@
     <MESSAGE value="DONE: I forget, what I do" />
     <MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" />
     <MESSAGE value="UPDATE: README.md" />
-    <option name="LAST_COMMIT_MESSAGE" value="UPDATE: README.md" />
+    <MESSAGE value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
+    <option name="LAST_COMMIT_MESSAGE" value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
   </component>
 </project>

app/components/checkboxes.tsx

@@ -8,7 +8,8 @@ export default function Checkboxes() {
     return (
         <div className={"m3 m3-wrapper"}>
             <h1> Checkboxes </h1>
-            <div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
+            <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
+                <div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
                     <div>
                         <h2> Default </h2>
                         <div style={{display: "flex", gap: "2em"}}>
@@ -24,6 +25,7 @@ export default function Checkboxes() {
                             <Checkbox disabled defaultChecked/>
                         </div>
                     </div>
+                </div>
                 <div>
                     <h2> Errored </h2>
                     <form style={{display: "flex", gap: "2em", flexDirection: "column"}}>

app/components/icon-buttons.tsx

@@ -8,7 +8,7 @@ function IconButtons() {
     return (
         <div className={"m3 m3-wrapper"}>
             <h1> Icon buttons </h1>
-            <div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
+            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                 <div>
                     <h2> Default buttons </h2>
                     <div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>

app/components/radios.tsx

@@ -5,7 +5,7 @@ export default function Radios() {
     return (
         <div className={"m3 m3-wrapper"}>
             <h1> Radio </h1>
-            <div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
+            <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
                 <div>
                     <h2> Default </h2>
                     <div style={{display: "flex", gap: "2em"}}>

app/components/switches.tsx

@@ -5,6 +5,7 @@ export default function Switches() {
     return (
         <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
             <h1> Switches </h1>
+            <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                 <div style={{display: "flex", flexDirection: "column"}}>
                     <h2 style={{margin: 0}}> Without icon </h2>
                     <div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
@@ -51,5 +52,6 @@ export default function Switches() {
                     </div>
                 </div>
             </div>
+        </div>
     );
 }

app/layout.tsx

@@ -1,6 +1,12 @@
 import "../src/styles/generics.css"
 import "../src/styles/button.css"
 import "../src/styles/ripple.css"
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+}
 
 export default function RootLayout({
     children,

dist/output.css

@@ -226,7 +226,7 @@ select {
 
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button-skeleton styles.
+2. Remove default button-layout styles.
 */
 
 button,

dist/styles/styles.css

@@ -226,7 +226,7 @@ select {
 
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button-skeleton styles.
+2. Remove default button-layout styles.
 */
 
 button,

src/primitive-components/button/button.tsx

@@ -1,7 +1,8 @@
 import {forwardRef} from "react";
-import {buttonMainProps} from "../button-skeleton/button.types";
+import {Icon} from "../material-you-components";
-import {ButtonLayout} from "../button-skeleton/button-layout";
 import {IRippleProps} from "../ripple/ripple.types";
+import {ButtonLayout} from "../button-layout/button-layout";
+import {buttonMainProps} from "../button-layout/button.types";
 
 /**
  * Button component
@@ -18,9 +19,9 @@ export const Button = forwardRef(
                       variant={variant ? variant : "filled"}>
             {
                 icon ?
-                    <span className={"m3 m3-icon"}>
+                    <Icon iconSize={20}>
                         {icon}
-                </span>
+                    </Icon>
                     : <></>
             }
             <span className={"label-large"}>

src/primitive-components/checkbox-layout/check-box-skeleton.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import {CheckboxLayoutProps} from "./checkbox-layout.types";
+
+export const CheckBoxSkeleton = forwardRef(
+
+    function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
+
+        const checkboxRef = useRef<any>(null);
+
+        useEffect(() => {
+            checkboxRef.current.indeterminate = indeterminate === true;
+        }, []);
+
+        useImperativeHandle(ref, () => checkboxRef.current);
+
+        let classesType = typeInput || type;
+
+        const classes = props.className !== undefined ?
+            `m3 m3-${type} ${props.className}` : `m3 m3-${classesType}`
+
+        return (
+            <input ref={checkboxRef}
+                   {...props}
+                   type={type}
+                   className={classes.trimEnd()}/>
+        );
+
+    }
+
+);

src/primitive-components/checkbox-layout/checkbox-layout.types.ts

@@ -0,0 +1,7 @@
+import {PropsWithChildren} from "react";
+
+export interface CheckboxLayoutProps extends PropsWithChildren<any>{
+    indeterminate?: boolean;
+    typeInput? : string;
+    type? : string;
+}

src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx

@@ -1,34 +0,0 @@
-"use client"
-
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
-
-export const CheckBoxSkeleton = forwardRef(
-
-    function CheckBoxBase(props : any, ref) : JSX.Element {
-
-        const checkboxRef = useRef<any>(null);
-
-        useEffect(() => {
-            checkboxRef.current.indeterminate = props.indeterminate === "true";
-        }, []);
-
-        useImperativeHandle(ref, () => checkboxRef);
-
-        let type = props.typeInput || props.type,
-            _props = {...props};
-        if(_props.indeterminate) delete _props.indeterminate;
-        if(_props.typeInput) delete _props.typeInput;
-
-        const classes = props.className !== undefined ?
-            `m3 m3-${type} ${props.className}` : `m3 m3-${type}`
-
-        return (
-            <input ref={checkboxRef}
-                   {..._props}
-                   type={props.type}
-                   className={classes.trimEnd()}/>
-        );
-
-    }
-
-);

src/primitive-components/checkbox/checkbox.tsx

@@ -1,8 +1,8 @@
 import {RippleArea} from "../ripple/ripple-area";
-import {forwardRef, useRef, useState} from "react";
-import useRippleEffect from "../ripple/hooks/useRippleEffect";
-import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
 import {IRippleProps} from "../ripple/ripple.types";
+import useRippleEffect from "../ripple/hooks/useRippleEffect";
+import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
 
 /**
  * Checkbox component
@@ -13,17 +13,25 @@ export const Checkbox = forwardRef(
     ({centralRipple, ...props} : any & IRippleProps, ref) => {
 
         const [isActive, setIsActive] = useState<boolean>(false),
+            [checked, setChecked] = useState<boolean>(props.checked ?? false),
             ripplesRef = useRef(null),
+            checkboxRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
 
         const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
         const indeterminate = (props.indeterminate === true).toString();
 
+        useImperativeHandle(ref, () => checkboxRef.current)
+
+        useEffect(() => {
+            setChecked(!checked)
+        }, [checkboxRef.current?.checked]);
+
         return (
             <label {...events}
                    className={classes}>
                 <CheckBoxSkeleton {...props}
-                                  ref={ref}
+                                  ref={checkboxRef}
                                   indeterminate={indeterminate}
                                   type={"checkbox"}/>
                 <span className={"m3 m3-checkbox-state-layer"}/>

src/primitive-components/fab/fab.tsx

@@ -1,30 +1,45 @@
 import {forwardRef} from "react";
-import {FABMainProps} from "../button-skeleton/button.types";
+import {FABMainProps} from "../button-layout/button.types";
-import {ButtonLayout} from "../button-skeleton/button-layout";
+import {ButtonLayout} from "../button-layout/button-layout";
 import {IRippleProps} from "../ripple/ripple.types";
+import {Icon} from "../material-you-components";
 
 /**
  * FABs component
  ** description
  */
 
+const sizes = {
+    "small": 24,
+    "default": 24,
+    "large": 36,
+    "extended": 24,
+}
+
 export const FAB = forwardRef(
-    ({variant, disabled, icon, centralRipple = false, size, elevated, ...props} : FABMainProps & IRippleProps, ref) => (
+    ({
+            variant,
+            disabled,
+            icon,
+            centralRipple = false,
+            size = "default",
+            elevated,
+            ...props} : FABMainProps & IRippleProps, ref) => (
         <ButtonLayout {...props}
                       ref={ref}
                       centralRipple={centralRipple}
                       variant={variant ? variant : "surface"}
-                      className={`m3-fab m3-${size ?? "default"}-fab ${!(elevated ?? false) && "without-elevation"}`}>
+                      className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && "without-elevation"}`}>
-        <span className={"m3-icon"}>
+
+            <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                 {icon}
-        </span>
+            </Icon>
             {
                 size === "extended" ? (
                         <span className={"label-large"}>
                             {props.children}
                         </span>
-                    )
+                    ) : <></>
-                    : <></>
             }
         </ButtonLayout>
     )

src/primitive-components/icon-button/icon-button.tsx

@@ -1,35 +1,45 @@
-import {ButtonLayout} from "../button-skeleton/button-layout";
+import {ButtonLayout} from "../button-layout/button-layout";
-import {iconButtonMainProps} from "../button-skeleton/button.types";
+import {iconButtonMainProps} from "../button-layout/button.types";
 import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
 import {IRippleProps} from "../ripple/ripple.types";
+import {Icon} from "../material-you-components";
 
 /**
- * Icon button-skeleton component
+ * Icon button-layout component
  ** description
  */
 
 export const IconButton = forwardRef(
 
-    ({icon, variant, disabled, selected = false, toggled = false, centralRipple, ...props} : iconButtonMainProps & IRippleProps, ref) => {
+    ({
+            icon,
+            variant,
+            disabled,
+            selected = false,
+            toggled = false,
+            centralRipple,
+            ...props
+        } : iconButtonMainProps & IRippleProps,
+        ref) => {
 
         const [toggleIcon, setToggleIcon] = useState<any>({
             state : selected == true ? "selected" : "unselected",
-            icon : toggled ? toggled.unselected : ""
+            icon : toggled ? toggled.unselected ?? "add_circle" : "add_circle"
         });
 
-        const toggle = useCallback((classes, icon) => {
+        const toggle = (classes, icon) => {
             setToggleIcon(() => ({
                 state : classes,
                 icon : icon,
             }))
-        }, [])
+        }
 
         let buttonRef = useRef<HTMLButtonElement>(null);
 
         const callback = useCallback(() => {
             if(toggled) {
-                if (toggleIcon.state === "selected") toggle("", toggled.unselected)
+                if (toggleIcon.state === "selected") toggle("", toggled.unselected ?? "add_circle")
-                else toggle("selected", toggled.selected)
+                else toggle("selected", toggled.selected ?? "add_circle")
             }
             if(props.onClick) props.onClick();
         }, [toggleIcon])
@@ -44,11 +54,10 @@ export const IconButton = forwardRef(
                           disabled={disabled}
                           className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
                           variant={variant ? variant : "default"}>
-                <span className={"m3-icon"}>
+
-                    {
+                <Icon svgSize={40} iconSize={28} fill={toggleIcon.state === "selected" ? 1 : 0}>
-                        toggled ? toggleIcon.icon : icon ? icon : <></>
+                    {toggled ? toggleIcon.icon : icon ? icon : undefined}
-                    }
+                </Icon>
-                </span>
             </ButtonLayout>
         )
 

src/primitive-components/icon/icon.tsx

@@ -0,0 +1,48 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import {IconProps} from "./icon.types";
+import {bool, number, string} from "prop-types";
+
+const Icon = forwardRef(function Icon(
+    {
+        grade = 0,
+        weight = 500,
+        svgSize = 20,
+        fill = false,
+        iconSize = 20,
+        opticalSize = 24,
+        type = "outlined",
+        ...props
+    } : IconProps, ref : ForwardedRef<any>) {
+
+    let fontVariation = {
+        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`
+    };
+
+    return (
+        <svg {...props}
+             ref={ref}
+             className={`m3 m3-svg-icon ${props.className ?? ""}`.trim()}
+             width={svgSize}
+             height={svgSize}>
+            <text className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
+                  style={fontVariation}
+                  x={"50%"}
+                  y={"50%"}>
+                {props.children ?? "add_circle"}
+            </text>
+        </svg>
+    );
+})
+
+Icon.propTypes = {
+    fill : bool,
+    type : string,
+    grade : number,
+    weight : number,
+    svgSize : number,
+    iconSize : number,
+    children : string,
+    opticalSize : number,
+}
+
+export {Icon};

src/primitive-components/icon/icon.types.ts

@@ -0,0 +1,11 @@
+import {PropsWithChildren} from "react";
+
+export interface IconProps extends PropsWithChildren<any>{
+    fill?: boolean;
+    grade?: number;
+    svgSize?: number;
+    iconSize?: number;
+    opticalSize?: number;
+    type?: "outlined" | "rounded" | "sharp";
+    weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+}

src/primitive-components/material-you-components.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 export {FAB} from "./fab/fab";
+export {Icon} from "./icon/icon";
 export {Radio} from "./radio/radio";
 export {Badge} from "./badge/badge";
 export {Switch} from "./switch/switch";
@@ -11,4 +12,4 @@ export {RippleArea} from "./ripple/ripple-area";
 export {Ripples, Ripple} from "./ripple/ripple";
 export {TextField} from "./text-field/text-field";
 export {IconButton} from "./icon-button/icon-button";
-export {ButtonLayout} from "./button-skeleton/button-layout";
+export {ButtonLayout} from "./button-layout/button-layout";

src/primitive-components/radio/radio.tsx

@@ -1,7 +1,7 @@
 import {RippleArea} from "../ripple/ripple-area";
 import {forwardRef, useRef, useState} from "react";
 import useRippleEffect from "../ripple/hooks/useRippleEffect";
-import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
+import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
 import {IRippleProps} from "../ripple/ripple.types";
 
 /**

src/primitive-components/switch/switch.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from "react";
 import {switchMainProps} from "./switch.types";
-import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
+import {CheckBoxSkeleton} from "../checkbox-layout/check-box-skeleton";
 
 /**
  * Switch component

src/primitive-components/text-field/text-field.tsx

@@ -1,18 +1,12 @@
 "use client"
 
+import React, {useState} from 'react';
 import {bool, string} from "prop-types";
-import React, {PropsWithChildren, useState} from 'react';
+import {TextFieldInterface} from "./text-field.types";
 
-interface TextFieldInterface extends PropsWithChildren<any>{
+export function TextField({variant = "filled", withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
-    variant: "filled" | "outlined",
-    withAfterIcon?: boolean,
-    withBeforeIcon?: boolean,
-    supportingText?: string,
-}
 
-export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
+    const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
-
-    const [raised, setRaised] = useState<boolean>(props.placeholder ? true : false);
 
     const callback = (e : any) => {
         if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false);
@@ -47,7 +41,7 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
                            callback(event)
                            if(props.onBlur) props.onBlur(event)
                        }}/>
-                <label className={raised && "raised"}>
+                <label className={raised ? "raised" : ""}>
                     {props.children ?? "Label"}
                 </label>
                 <span className={"m3-text-field-state-layer"}/>

src/primitive-components/text-field/text-field.types.ts

@@ -0,0 +1,8 @@
+import {PropsWithChildren} from "react";
+
+export interface TextFieldInterface extends PropsWithChildren<any>{
+    variant: "filled" | "outlined",
+    withAfterIcon?: boolean,
+    withBeforeIcon?: boolean,
+    supportingText?: string,
+}

src/styles/button.css

@@ -6,12 +6,6 @@ button:not(.m3-fab, .m3-icon-button) {
   line-height: var(--md-sys-typescale-label-large-line-height);
   box-sizing: border-box;
 }
-button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-size: 14pt;
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-}
 button:not(.m3-fab, .m3-icon-button).m3 {
   contain: content;
   box-sizing: border-box;
@@ -28,37 +22,42 @@ button:not(.m3-fab, .m3-icon-button).m3 {
 button:not(.m3-fab, .m3-icon-button).filled {
   background-color: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
   color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
 }
 button:not(.m3-fab, .m3-icon-button).outlined {
   outline-offset: -1px;
   outline: 1px solid var(--md-sys-color-outline) !important;
   background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).text {
   padding: 10px 12px !important;
   background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).elevated {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   background-color: var(--md-sys-color-surface-container-low);
-}
-button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).tonal {
   background-color: var(--md-sys-color-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
   color: var(--md-sys-color-on-secondary-container);
 }
+button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-secondary-container);
+}
 button:not(.m3-fab, .m3-icon-button)::before {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";

src/styles/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECRI;EDUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECzCA;;AD4CA;ECtCA;;ADyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECxDA;;AD2DA;ECrDA;;ADwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ECNI;EDQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ECMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EC3CA;;AD8CA;ECxCA;;AD2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EC1DA;;AD6DA;ECvDA;;AD0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}

src/styles/button.sass

@@ -8,12 +8,6 @@ button:not(.m3-fab, .m3-icon-button)
     line-height: var(--md-sys-typescale-label-large-line-height)
     box-sizing: border-box
 
-    & > span.m3-icon
-        font-family: Material-Symbols-Outlined-Regular, sans-serif
-        font-size: 14pt
-        font-weight: var(--md-sys-typescale-label-large-font-weight)
-        line-height: var(--md-sys-typescale-label-large-line-height)
-
     &.m3
         contain: content
         box-sizing: border-box
@@ -29,33 +23,42 @@ button:not(.m3-fab, .m3-icon-button)
 
     &.filled
         background-color: var(--md-sys-color-primary)
-        &, & > span.m3-icon
+        &, & > svg.m3-svg-icon
             color: var(--md-sys-color-on-primary)
+            fill: var(--md-sys-color-on-primary)
 
     &.outlined
         outline-offset: -1px
         outline: 1px solid var(--md-sys-color-outline) !important
         background-color: #00000000
-        &, & > span.m3-icon
         color: var(--md-sys-color-primary)
 
+        & > svg.m3-svg-icon
+            fill: var(--md-sys-color-primary)
+
     &.text
         padding: 10px 12px !important
         background-color: #00000000
-        &, & > span.m3-icon
         color: var(--md-sys-color-primary)
 
+        & > svg.m3-svg-icon
+            fill: var(--md-sys-color-primary)
+
     &.elevated
         @include elevation-1(false)
         background-color: var(--md-sys-color-surface-container-low)
-        &, & > span.m3-icon
         color: var(--md-sys-color-primary)
 
+        & > svg.m3-svg-icon
+            fill: var(--md-sys-color-primary)
+
     &.tonal
         background-color: var(--md-sys-color-secondary-container)
-        &, & > span.m3-icon
         color: var(--md-sys-color-on-secondary-container)
 
+        & > svg.m3-svg-icon
+            fill: var(--md-sys-color-on-secondary-container)
+
     &::before
         @include state-layer
 

src/styles/checkbox.css

@@ -29,27 +29,28 @@ input[type=checkbox].m3.m3-checkbox {
   justify-content: center;
   box-sizing: content-box;
   z-index: 10;
-  width: 14px;
+  width: 18px;
-  height: 14px;
+  height: 18px;
   margin: 0;
   border-radius: 2px;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
+  outline-offset: -2px;
+  outline: 2px solid var(--md-sys-color-on-surface-variant);
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
-  border: 2px solid var(--md-sys-color-error);
+  outline-color: var(--md-sys-color-error);
   background-color: var(--md-sys-color-error);
 }
 input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  border: 2px solid var(--md-sys-color-error);
+  outline-color: var(--md-sys-color-error);
 }
 input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
-  border: 2px solid var(--md-sys-color-primary);
+  outline-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-primary);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
-  border: 2px solid var(--md-sys-color-on-surface);
+  outline-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
@@ -69,7 +70,7 @@ input[type=checkbox].m3.m3-checkbox:indeterminate::after {
   content: "check_indeterminate_small";
 }
 input[type=checkbox].m3.m3-checkbox:hover {
-  border: 2px solid var(--md-sys-color-on-surface);
+  outline-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);

src/styles/checkbox.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"checkbox.css"}

src/styles/checkbox.sass

@@ -20,28 +20,29 @@ input[type="checkbox"].m3.m3-checkbox
     justify-content: center
     box-sizing: content-box
     z-index: 10
-    width: 14px
+    width: 18px
-    height: 14px
+    height: 18px
     margin: 0
     border-radius: 2px
-    border: 2px solid var(--md-sys-color-on-surface-variant)
+    outline-offset: -2px
+    outline: 2px solid var(--md-sys-color-on-surface-variant)
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
-        border: 2px solid var(--md-sys-color-error)
+        outline-color: var(--md-sys-color-error)
         background-color: var(--md-sys-color-error)
 
     &:is(.m3.m3-error, :user-invalid)
-        border: 2px solid var(--md-sys-color-error)
+        outline-color: var(--md-sys-color-error)
 
     &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
-        border: 2px solid var(--md-sys-color-primary)
+        outline-color: var(--md-sys-color-primary)
         background-color: var(--md-sys-color-primary)
 
     &:disabled
         &:is(:hover, &)
             opacity: 38%
-            border: 2px solid var(--md-sys-color-on-surface)
+            outline-color: var(--md-sys-color-on-surface)
 
         &:checked:is(:hover, &)
             opacity: 38%
@@ -61,7 +62,7 @@ input[type="checkbox"].m3.m3-checkbox
         content: "check_indeterminate_small"
 
     &:hover
-        border: 2px solid var(--md-sys-color-on-surface)
+        outline-color: var(--md-sys-color-on-surface)
 
     &:not(:disabled)
         &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)

src/styles/fabs.css

@@ -27,48 +27,52 @@ button.m3.m3-fab::before {
 }
 button.m3.m3-fab.surface {
   background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
+button.m3.m3-fab.surface > svg.m3-svg-icon {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button.m3.m3-fab.primary {
   background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
+button.m3.m3-fab.primary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-primary-container);
+  fill: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
 button.m3.m3-fab.secondary {
   background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
+button.m3.m3-fab.secondary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-secondary-container);
+  fill: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-fab.tertiary {
   background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
+button.m3.m3-fab.tertiary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-tertiary-container);
+  fill: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);

src/styles/fabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}
+{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}

src/styles/fonts.css

@@ -1,33 +1,13 @@
 @font-face {
-  font-family: Material-Icons-Regular;
+  font-family: Material-Symbols-Rounded-Regular;
-  src: url("./font/MaterialIcons-Regular.ttf");
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-}
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
-@font-face {
-  font-family: Material-Icons-Outlined-Regular;
-  src: url("./font/MaterialIconsOutlined-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Round-Regular;
-  src: url("./font/MaterialIconsRound-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Sharp-Regular;
-  src: url("./font/MaterialIconsSharp-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Two-Tone-Regular;
-  src: url("./font/MaterialIconsTwoTone-Regular.otf");
 }
 @font-face {
   font-family: Material-Symbols-Outlined-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
-@font-face {
-  font-family: Material-Symbols-Round-Regular;
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
-}
 @font-face {
   font-family: Material-Symbols-Sharp-Regular;
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");

src/styles/fonts.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAAA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA","file":"fonts.css"}
+{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA","file":"fonts.css"}

src/styles/fonts.sass

@@ -1,70 +1,16 @@
-@font-face
+$fonts-family: ["Rounded", "Outlined", "Sharp"]
-    font-family: Material-Icons-Regular
-    src: url("./font/MaterialIcons-Regular.ttf")
 
+@each $font-family in $fonts-family
     @font-face
-    font-family: Material-Icons-Outlined-Regular
+        font-family: Material-Symbols-#{$font-family}-Regular
-    src: url("./font/MaterialIconsOutlined-Regular.otf")
+        src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].ttf")
+        src: url("./font/MaterialSymbols#{$font-family}[FILL,GRAD,opsz,wght].woff2") format("woff2")
 
-@font-face
+$weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700, "Black": 900)
-    font-family: Material-Icons-Round-Regular
-    src: url("./font/MaterialIconsRound-Regular.otf")
-
-@font-face
-    font-family: Material-Icons-Sharp-Regular
-    src: url("./font/MaterialIconsSharp-Regular.otf")
-
-@font-face
-    font-family: Material-Icons-Two-Tone-Regular
-    src: url("./font/MaterialIconsTwoTone-Regular.otf")
-
-@font-face
-    font-family: Material-Symbols-Outlined-Regular
-    src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf")
-    src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2")
-
-@font-face
-    font-family: Material-Symbols-Round-Regular
-    src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
-    src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2")
-
-@font-face
-    font-family: Material-Symbols-Sharp-Regular
-    src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf")
-    src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2")
 
+@each $name, $weight in $weights
     @font-face
         font-family: Roboto
-    font-face-name: Thin
+        font-face-name: #{$name}
-    font-weight: 100
+        font-weight: #{$weight}
-    src: url("./font/Roboto-Thin.ttf")
+        src: url("./font/Roboto-#{$name}.ttf")
-
-@font-face
-    font-family: Roboto
-    font-face-name: Light
-    font-weight: 300
-    src: url("./font/Roboto-Light.ttf")
-
-@font-face
-    font-family: Roboto
-    font-face-name: Regular
-    font-weight: 400
-    src: url("./font/Roboto-Regular.ttf")
-
-@font-face
-    font-family: Roboto
-    font-face-name: Medium
-    font-weight: 500
-    src: url("./font/Roboto-Medium.ttf")
-
-@font-face
-    font-family: Roboto
-    font-face-name: Bold
-    font-weight: 700
-    src: url("./font/Roboto-Bold.ttf")
-
-@font-face
-    font-family: Roboto
-    font-face-name: Black
-    font-weight: 900
-    src: url("./font/Roboto-Black.ttf")

src/styles/generics.css

@@ -32,48 +32,52 @@ button.m3.m3-fab::before {
 }
 button.m3.m3-fab.surface {
   background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
+button.m3.m3-fab.surface > svg.m3-svg-icon {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 button.m3.m3-fab.primary {
   background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
+button.m3.m3-fab.primary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-primary-container);
+  fill: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
 button.m3.m3-fab.secondary {
   background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
+button.m3.m3-fab.secondary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-secondary-container);
+  fill: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-fab.tertiary {
   background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary:not(.without-elevation) {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
-button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
+button.m3.m3-fab.tertiary > svg.m3-svg-icon {
-  color: var(--md-sys-color-on-tertiary-container);
+  fill: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
   background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
@@ -137,6 +141,74 @@ button.m3.m3-fab:focus-visible.tertiary::before {
   background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 
+svg.m3.m3-svg-icon > text {
+  alignment-baseline: central;
+  text-anchor: middle;
+}
+svg.m3.m3-svg-icon > text.m3-size-12px {
+  width: 12px;
+  aspect-ratio: 1;
+  line-height: 12px;
+  font-size: 12px;
+}
+svg.m3.m3-svg-icon > text.m3-size-16px {
+  width: 16px;
+  aspect-ratio: 1;
+  line-height: 16px;
+  font-size: 16px;
+}
+svg.m3.m3-svg-icon > text.m3-size-20px {
+  width: 20px;
+  aspect-ratio: 1;
+  line-height: 20px;
+  font-size: 20px;
+}
+svg.m3.m3-svg-icon > text.m3-size-24px {
+  width: 24px;
+  aspect-ratio: 1;
+  line-height: 24px;
+  font-size: 24px;
+}
+svg.m3.m3-svg-icon > text.m3-size-28px {
+  width: 28px;
+  aspect-ratio: 1;
+  line-height: 28px;
+  font-size: 28px;
+}
+svg.m3.m3-svg-icon > text.m3-size-32px {
+  width: 32px;
+  aspect-ratio: 1;
+  line-height: 32px;
+  font-size: 32px;
+}
+svg.m3.m3-svg-icon > text.m3-size-36px {
+  width: 36px;
+  aspect-ratio: 1;
+  line-height: 36px;
+  font-size: 36px;
+}
+svg.m3.m3-svg-icon > text.m3-size-40px {
+  width: 40px;
+  aspect-ratio: 1;
+  line-height: 40px;
+  font-size: 40px;
+}
+svg.m3.m3-svg-icon > text.m3-size-48px {
+  width: 48px;
+  aspect-ratio: 1;
+  line-height: 48px;
+  font-size: 48px;
+}
+svg.m3.m3-svg-icon > text.m3-Outlined {
+  font-family: Material-Symbols-Outlined-Regular;
+}
+svg.m3.m3-svg-icon > text.m3-Rounded {
+  font-family: Material-Symbols-Rounded-Regular;
+}
+svg.m3.m3-svg-icon > text.m3-Sharp {
+  font-family: Material-Symbols-Sharp-Regular;
+}
+
 label.m3.m3-radio-label {
   display: flex;
   position: relative;
@@ -236,35 +308,15 @@ svg.m3.m3-badge > text {
 }
 
 @font-face {
-  font-family: Material-Icons-Regular;
+  font-family: Material-Symbols-Rounded-Regular;
-  src: url("./font/MaterialIcons-Regular.ttf");
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-}
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
-@font-face {
-  font-family: Material-Icons-Outlined-Regular;
-  src: url("./font/MaterialIconsOutlined-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Round-Regular;
-  src: url("./font/MaterialIconsRound-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Sharp-Regular;
-  src: url("./font/MaterialIconsSharp-Regular.otf");
-}
-@font-face {
-  font-family: Material-Icons-Two-Tone-Regular;
-  src: url("./font/MaterialIconsTwoTone-Regular.otf");
 }
 @font-face {
   font-family: Material-Symbols-Outlined-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
-@font-face {
-  font-family: Material-Symbols-Round-Regular;
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
-}
 @font-face {
   font-family: Material-Symbols-Sharp-Regular;
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
@@ -314,12 +366,6 @@ button:not(.m3-fab, .m3-icon-button) {
   line-height: var(--md-sys-typescale-label-large-line-height);
   box-sizing: border-box;
 }
-button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-size: 14pt;
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  line-height: var(--md-sys-typescale-label-large-line-height);
-}
 button:not(.m3-fab, .m3-icon-button).m3 {
   contain: content;
   box-sizing: border-box;
@@ -336,37 +382,42 @@ button:not(.m3-fab, .m3-icon-button).m3 {
 button:not(.m3-fab, .m3-icon-button).filled {
   background-color: var(--md-sys-color-primary);
 }
-button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
   color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
 }
 button:not(.m3-fab, .m3-icon-button).outlined {
   outline-offset: -1px;
   outline: 1px solid var(--md-sys-color-outline) !important;
   background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).text {
   padding: 10px 12px !important;
   background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).elevated {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   background-color: var(--md-sys-color-surface-container-low);
-}
-button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
   color: var(--md-sys-color-primary);
 }
+button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
+  fill: var(--md-sys-color-primary);
+}
 button:not(.m3-fab, .m3-icon-button).tonal {
   background-color: var(--md-sys-color-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
   color: var(--md-sys-color-on-secondary-container);
 }
+button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
+  fill: var(--md-sys-color-on-secondary-container);
+}
 button:not(.m3-fab, .m3-icon-button)::before {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
   content: "";
@@ -674,27 +725,28 @@ input[type=checkbox].m3.m3-checkbox {
   justify-content: center;
   box-sizing: content-box;
   z-index: 10;
-  width: 14px;
+  width: 18px;
-  height: 14px;
+  height: 18px;
   margin: 0;
   border-radius: 2px;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
+  outline-offset: -2px;
+  outline: 2px solid var(--md-sys-color-on-surface-variant);
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
-  border: 2px solid var(--md-sys-color-error);
+  outline-color: var(--md-sys-color-error);
   background-color: var(--md-sys-color-error);
 }
 input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  border: 2px solid var(--md-sys-color-error);
+  outline-color: var(--md-sys-color-error);
 }
 input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
-  border: 2px solid var(--md-sys-color-primary);
+  outline-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-primary);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
-  border: 2px solid var(--md-sys-color-on-surface);
+  outline-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
   opacity: 38%;
@@ -714,7 +766,7 @@ input[type=checkbox].m3.m3-checkbox:indeterminate::after {
   content: "check_indeterminate_small";
 }
 input[type=checkbox].m3.m3-checkbox:hover {
-  border: 2px solid var(--md-sys-color-on-surface);
+  outline-color: var(--md-sys-color-on-surface);
 }
 input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
@@ -983,68 +1035,60 @@ button.m3.m3-icon-button > span.m3-icon {
   font-size: 2em;
   font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
 }
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
-  font-family: Material-Symbols-Round-Regular, serif;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
-  font-size: 13.49px;
-  font-family: Material-Icons-Regular, serif;
-  font-weight: 500;
-}
 button.m3.m3-icon-button.default {
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.default.selected.toggled {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.filled {
-  color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.filled.toggled {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-surface-container-highest);
 }
 button.m3.m3-icon-button.filled.selected.toggled {
-  color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.tonal.toggled {
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: var(--md-sys-color-surface-container-highest);
 }
 button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
-  color: var(--md-sys-color-on-secondary-container);
+  fill: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 }
 button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined {
   border: 1px solid var(--md-sys-color-outline);
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined.toggled.selected:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined.selected.toggled {
   border: 1px solid rgba(0, 0, 0, 0);
   background-color: var(--md-sys-color-inverse-surface);
-  color: var(--md-sys-color-inverse-on-surface);
+  fill: var(--md-sys-color-inverse-on-surface);
 }
 button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);

src/styles/generics.sass

@@ -1,4 +1,5 @@
 @import "fabs"
+@import "icon"
 @import "radio"
 @import "badge"
 @import "fonts"

src/styles/icon-button.css

@@ -24,68 +24,60 @@ button.m3.m3-icon-button > span.m3-icon {
   font-size: 2em;
   font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
 }
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
-  font-family: Material-Symbols-Round-Regular, serif;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
-  font-size: 13.49px;
-  font-family: Material-Icons-Regular, serif;
-  font-weight: 500;
-}
 button.m3.m3-icon-button.default {
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.default.selected.toggled {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.filled {
-  color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.filled.toggled {
-  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-surface-container-highest);
 }
 button.m3.m3-icon-button.filled.selected.toggled {
-  color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-primary);
 }
 button.m3.m3-icon-button.tonal.toggled {
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: var(--md-sys-color-surface-container-highest);
 }
 button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
-  color: var(--md-sys-color-on-secondary-container);
+  fill: var(--md-sys-color-on-secondary-container);
   background-color: var(--md-sys-color-secondary-container);
 }
 button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined {
   border: 1px solid var(--md-sys-color-outline);
-  color: var(--md-sys-color-on-surface-variant);
+  fill: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
   background-color: rgba(0, 0, 0, 0);
 }
 button.m3.m3-icon-button.outlined.toggled.selected:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined.selected.toggled {
   border: 1px solid rgba(0, 0, 0, 0);
   background-color: var(--md-sys-color-inverse-surface);
-  color: var(--md-sys-color-inverse-on-surface);
+  fill: var(--md-sys-color-inverse-on-surface);
 }
 button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);

src/styles/icon-button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}
+{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI","file":"icon-button.css"}

src/styles/icon-button.sass

@@ -26,73 +26,64 @@ button.m3.m3-icon-button
         font-size: 2em
         font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48
 
-    &:is(.default, .filled, .tonal, .outlined)
-        &
-            font-family: Material-Symbols-Round-Regular, serif
-
-        &.selected.toggled
-            font-size: 13.49px
-            font-family: Material-Icons-Regular, serif
-            font-weight: 500
-
     &.default
         &
-            color: var(--md-sys-color-on-surface-variant)
+            fill: var(--md-sys-color-on-surface-variant)
             background-color: #00000000
 
         &:disabled, &.selected:disabled, &.selected.toggled:disabled
-            color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
+            fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
             background-color: #00000000
 
         &.selected.toggled
-            color: var(--md-sys-color-primary)
+            fill: var(--md-sys-color-primary)
 
     &.filled
         &
-            color: var(--md-sys-color-on-primary)
+            fill: var(--md-sys-color-on-primary)
             background-color: var(--md-sys-color-primary)
 
         &.toggled
-            color: var(--md-sys-color-primary)
+            fill: var(--md-sys-color-primary)
             background-color: var(--md-sys-color-surface-container-highest)
 
         &.selected.toggled
-            color: var(--md-sys-color-on-primary)
+            fill: var(--md-sys-color-on-primary)
             background-color: var(--md-sys-color-primary)
 
     &.tonal
         &.toggled
-            color: var(--md-sys-color-on-surface-variant)
+            fill: var(--md-sys-color-on-surface-variant)
             background-color: var(--md-sys-color-surface-container-highest)
 
         &.selected.toggled, &
-            color: var(--md-sys-color-on-secondary-container)
+            fill: var(--md-sys-color-on-secondary-container)
             background-color: var(--md-sys-color-secondary-container)
 
     &:is(.tonal, .filled, .toggled.selected):disabled
-        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+        fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
         background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
     &.outlined
         &
             border: 1px solid var(--md-sys-color-outline)
-            color: var(--md-sys-color-on-surface-variant)
+            fill: var(--md-sys-color-on-surface-variant)
             background-color: #00000000
 
         &:disabled
             border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
-            color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
+            fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent)
             background-color: #00000000
 
         &.toggled.selected:disabled
             border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent)
-            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
+            fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
         &.selected.toggled
             border: 1px solid #00000000
             background-color: var(--md-sys-color-inverse-surface)
-            color: var(--md-sys-color-inverse-on-surface)
+            fill: var(--md-sys-color-inverse-on-surface)
 
     &.filled:not(:disabled)
         & > .m3.m3-ripple-domain > .m3.ripple, &.selected.toggled > .m3.m3-ripple-domain > .m3.ripple

src/styles/icon.css

@@ -0,0 +1,69 @@
+svg.m3.m3-svg-icon > text {
+  alignment-baseline: central;
+  text-anchor: middle;
+}
+svg.m3.m3-svg-icon > text.m3-size-12px {
+  width: 12px;
+  aspect-ratio: 1;
+  line-height: 12px;
+  font-size: 12px;
+}
+svg.m3.m3-svg-icon > text.m3-size-16px {
+  width: 16px;
+  aspect-ratio: 1;
+  line-height: 16px;
+  font-size: 16px;
+}
+svg.m3.m3-svg-icon > text.m3-size-20px {
+  width: 20px;
+  aspect-ratio: 1;
+  line-height: 20px;
+  font-size: 20px;
+}
+svg.m3.m3-svg-icon > text.m3-size-24px {
+  width: 24px;
+  aspect-ratio: 1;
+  line-height: 24px;
+  font-size: 24px;
+}
+svg.m3.m3-svg-icon > text.m3-size-28px {
+  width: 28px;
+  aspect-ratio: 1;
+  line-height: 28px;
+  font-size: 28px;
+}
+svg.m3.m3-svg-icon > text.m3-size-32px {
+  width: 32px;
+  aspect-ratio: 1;
+  line-height: 32px;
+  font-size: 32px;
+}
+svg.m3.m3-svg-icon > text.m3-size-36px {
+  width: 36px;
+  aspect-ratio: 1;
+  line-height: 36px;
+  font-size: 36px;
+}
+svg.m3.m3-svg-icon > text.m3-size-40px {
+  width: 40px;
+  aspect-ratio: 1;
+  line-height: 40px;
+  font-size: 40px;
+}
+svg.m3.m3-svg-icon > text.m3-size-48px {
+  width: 48px;
+  aspect-ratio: 1;
+  line-height: 48px;
+  font-size: 48px;
+}
+svg.m3.m3-svg-icon > text.m3-Outlined {
+  font-family: Material-Symbols-Outlined-Regular;
+}
+svg.m3.m3-svg-icon > text.m3-Rounded {
+  font-family: Material-Symbols-Rounded-Regular;
+}
+svg.m3.m3-svg-icon > text.m3-Sharp {
+  font-family: Material-Symbols-Sharp-Regular;
+}
+
+/*# sourceMappingURL=icon.css.map */

src/styles/icon.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI","file":"icon.css"}

src/styles/icon.sass

@@ -0,0 +1,19 @@
+svg.m3.m3-svg-icon
+    $sizes: [12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px]
+    $types: ["Outlined", "Rounded", "Sharp"]
+
+    & > text
+        alignment-baseline: central
+        text-anchor: middle
+
+    @each $size in $sizes
+        & > text.m3-size-#{$size}
+            width: $size
+            aspect-ratio: 1
+            line-height: $size
+            font-size: $size
+
+    @each $type in $types
+        & > text.m3-#{$type}
+            font-family: Material-Symbols-#{$type}-Regular
+

src/styles/mixins/m3-mixins.sass

@@ -22,8 +22,9 @@
     &:not(.without-elevation)
         @include elevation-3(false)
     background-color: var($bg-color)
-    & > span.m3-icon, &
     color: var($color)
+    & > svg.m3-svg-icon
+        fill: var($color)
     & > .m3.m3-ripple-domain > .m3.ripple
         background: color-mix(in srgb, var($color) 12%, transparent)