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

import { HTMLAttributes } from "react"
import { MaterialIconName, materialIcons } from "./generated"
import { VariantProps } from "class-variance-authority"
import { iconVariants } from "../variants"
import styles from "./index.module.css"

export interface MaterialIconProps
  extends
    Omit<HTMLAttributes<HTMLOrSVGElement>, "color" | "id">,
    VariantProps<typeof iconVariants> {
  icon: MaterialIconName
  size?: number
  styleName?: "outlined" | "rounded" | "sharp"
  isFilled?: boolean
}

export type MaterialIconSetIconProps = Omit<MaterialIconProps, "icon">

export function MaterialIcon({
  icon,
  size = 24,
  styleName = "outlined",
  color = "CurrentColor",
  isFilled,
  ...props
}: MaterialIconProps) {
  const iconStyles = materialIcons[icon]

  if (!iconStyles) {
    console.warn(`Icon "${icon}" not found in registry`)
    return null
  }

  const styleVariants = iconStyles[styleName]

  if (!styleVariants) {
    console.warn(`Icon "${icon}" does not have style "${styleName}"`)
    return null
  }

  const IconComponent = isFilled ? styleVariants.filled : styleVariants.outlined

  if (!IconComponent) {
    console.warn(
      `Icon "${icon}" does not have ${
        isFilled ? "filled" : "outlined"
      } variant for style "${styleName}"`
    )
    return null
  }

  const iconClassName = iconVariants({ color })

  return (
    <span
      data-testid="MaterialIcon"
      data-icon-name={icon}
      className={`${styles.iconWrapper}`}
      {...props}
    >
      <IconComponent
        width={size}
        height={size}
        className={iconClassName}
        aria-hidden
        focusable={false}
      />
    </span>
  )
}