Icons
Icon component that renders Material Symbols Sharp icons as inline SVGs.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
iconName | IconName | Yes | - | Name of the icon to display |
className | string | No | - | Additional CSS classes |
Available Icons
| Icon Name | Description |
|---|---|
'keyboard_arrow_down' | Down arrow (for dropdowns/accordions) |
'arrow_outward' | Outward arrow (external links) |
'close' | Close/X icon |
'menu_open' | Menu/hamburger icon |
'search' | Search/magnifying glass |
'dark_mode' | Dark mode toggle |
'play_arrow' | Play button |
'person' | Person/user icon |
'description' | Document/description icon |
Usage
import Icons from '@/components/atoms/Icons';
<Icons iconName="search" className="w-6 h-6" />Features
- Inline SVG rendering (no external requests)
- Uses
currentColorfor fill (inherits text color) - Accessible (includes
aria-hidden="true") - Responsive sizing via className
- Default size: 24x24px
Notes
- Returns
nullif icon data is not found - Icons are loaded from
@iconify/icons-material-symbolspackage - SVG viewBox and dimensions are automatically set from icon data