Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 258x 8301x | import { MaterialSymbol } from 'material-symbols'
 
type IconProps = {
	/** The icon to show. */
	icon: MaterialSymbol
	/** Fill icons. */
	isFilled?: boolean
	/** Custom classes. */
	className?: string
	/** Use this to select element for testing. */
	datacy?: string
}
 
/**
 * The `Icon` component is used to display a material icon.
 */
export const Icon: React.FC<IconProps> = ({ icon, isFilled = false, datacy, className }) => (
	<i
		datacy={datacy}
		style={isFilled ? { fontVariationSettings: "'FILL' 1" } : {}}
		className={`material-symbols-rounded${className ? ` ${className}` : ''}`}
	>
		{icon}
	</i>
)
  |