feat: optimize Material Symbols

packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx

@@ -8,29 +8,17 @@ import { iconVariants } from '../variants'
 import type { VariantProps } from 'class-variance-authority'
 
 export interface MaterialIconProps
-  extends Omit<MaterialSymbolProps, 'color' | 'fill'>,
+  extends Pick<MaterialSymbolProps, 'size' | 'icon' | 'className' | 'style'>,
     VariantProps<typeof iconVariants> {
   isFilled?: boolean
 }
-
 export type MaterialIconSetIconProps = Omit<MaterialIconProps, 'icon'>
-
 export function MaterialIcon({
-  icon,
   color,
-  size = 24,
-  isFilled = false,
   className,
+  isFilled = false,
   ...props
 }: MaterialIconProps) {
   const classNames = iconVariants({ className, color })
-  return (
-    <MaterialSymbol
-      icon={icon}
-      size={size}
-      className={classNames}
-      fill={isFilled}
-      {...props}
-    />
-  )
+  return <MaterialSymbol className={classNames} {...props} fill={isFilled} />
 }

packages/design-system/lib/fonts.css

@@ -263,3 +263,32 @@
   src: url(/_static/fonts/canela-deck/CanelaDeck-ThinItalic.otf)
     format('opentype');
 }
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(/_static/fonts/material-symbols/rounded-eaec15a9.woff2)
+    format('woff2');
+}
+
+.material-symbols {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: inherit;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  user-select: none;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}