type MaterialIconProps = {
  icon: string;
  size?: number;
  fill?: boolean;
  className?: string;
};

export function MaterialIcon({
  icon,
  size = 24,
  fill = false,
  className = "",
}: MaterialIconProps) {
  return (
    <span
      className={`material-symbols-outlined ${className}`}
      style={{
        fontSize: size,
        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${size}`,
      }}
    >
      {icon}
    </span>
  );
}
