feat: optimize Material Symbols

packages/design-system/README.md

@@ -148,6 +148,6 @@ Each component should have at least one Storybook story. A default story that sh
 
 Stories that involve other non-related components are compositions. These should be placed in the `Compositions/` folder where the composition has the best chance of discoverability, typically inside the component folder of the outermost component of the composition. Exporting the same composition in multiple places can be good for discoverability.
 
-### Icons
+### Icons / Material Symbols
 
-Still a work in progress.
+Read the README.md in the monorepo root.

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;
+}