Files
web/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
Rasmus Langvad d0546926a9 Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00

41 lines
1.1 KiB
TypeScript

import { MaterialSymbol, type MaterialSymbolProps } from "./MaterialSymbol"
import { iconVariants } from "../variants"
import type { VariantProps } from "class-variance-authority"
import { HTMLAttributes } from "react"
import { getIconAriaProps } from "../utils"
export interface MaterialIconProps
extends
Pick<MaterialSymbolProps, "size" | "icon" | "className" | "style">,
Omit<HTMLAttributes<HTMLSpanElement>, "color" | "id">,
VariantProps<typeof iconVariants> {
isFilled?: boolean
}
export type MaterialIconSetIconProps = Omit<MaterialIconProps, "icon">
export function MaterialIcon({
color,
size = 24,
className,
isFilled = false,
...props
}: MaterialIconProps) {
const classNames = iconVariants({ className, color })
const ariaProps = getIconAriaProps(props)
return (
// The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
<span>
<MaterialSymbol
{...props}
className={classNames}
data-testid="MaterialIcon"
size={size}
fill={isFilled}
{...ariaProps}
/>
</span>
)
}