Font icon
The original Material Icons, bundled with your components.
Installation
pnpm dlx shadcn@latest add https://react-toolbox.io/r/font-icon.jsonNew here? Set up your project first. Styles, fonts, and required components are included.
Usage
Pass a Material Icon name as value. Mark decorative icons aria-hidden, and give meaningful icons an accessible label. The registry includes the local icon font.
Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.
State and callbacks
FontIcon renders its value or children. It has no application state. Supply an accessible label when the icon communicates meaning without visible text.
API reference
Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.
FontIcon
| Property | Type | Default |
|---|---|---|
alt | string | '' |
value | ReactNode | — |
Also inherits ComponentPropsWithRef<'span'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.
Additional defaults on inherited props: className = ''.
Exported TypeScript types
Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/font-icon.
FontIconProps
interface FontIconProps extends ComponentPropsWithRef<'span'> {
alt?: string;
value?: ReactNode;
}Material guidelines
- Use the 24px system icon grid and consistent optical alignment. A glyph’s visible size is separate from its control’s 48px interaction area.
- On light surfaces, standard active icons use 54% black and inactive icons use 38%. Brand color can indicate an emphasized action or state.