Icons

ChronoSketch includes selected Material Design Icons (filled) and Font Awesome Free (solid) as inline SVG data. They work offline without an icon font, stylesheet, CDN, consumer dependency or additional network request. The complete upstream catalogs and Font Awesome Pro are not included in the distributed runtime.

createCalendar({
    iconSet: 'material', // default; alternatively 'font-awesome'
    icons: {
        previous: 'font-awesome:arrow-left',
        next: 'font-awesome:arrow-right',
        datePicker: 'material:calendar_today',
    },
})

Configuration

iconSet supplies defaults for all slots. icons overrides individual slots and can mix the two sets. Available slots are previous, next, datePicker, viewSelect and selection. Previous/next apply to both the toolbar and picker; selection is the check mark in the view list. Labels and callbacks stay unchanged when icons change. Icons are decorative and hidden from assistive technologies; the controls keep their localized accessible names.

Vanilla: calendar.setIcons(overrides?, iconSet?) replaces the icon configuration. Omitted overrides clear existing overrides; omitted set restores Material defaults. React/Vue synchronize icons and iconSet without remounting. Updates preserve focus, navigation, scroll and the open picker. Invalid sets, slots or names throw before changing the active configuration. Each instance has its own configuration.

Included names

Material (material: prefix)	Font Awesome (font-awesome: prefix)
chevron_left	chevron-left
chevron_right	chevron-right
expand_more	chevron-down
arrow_back	arrow-left
arrow_forward	arrow-right
calendar_today	calendar-days
check	check
close	xmark
apartment	building
groups	users
location_on	location-dot
unfold_less	compress
unfold_more	expand

These 26 identifiers are exposed through CalendarIconName. Also exported: CalendarIconSet, CalendarIconSlot and CalendarIcons. No arbitrary icon names, HTML strings, CSS class injection or remote SVG URLs are accepted.

Styling

.xc-icon uses currentColor and a fixed 24px box. .xc-icon-button centers the box; viewBox preserves each source icon's aspect ratio. Selected-option icons use 20px. .xc-date-trigger aligns the date text with its icon. Style controls or these hooks through your scoped CSS; see styling. The configuration uses identifier strings, not Web nodes, leaving native adapters free to map the same identifiers without a CSS/font dependency. Native rendering is not implemented.

Licenses

See third-party notices for attribution and the shipped license files. The Google icon assets use Apache 2.0; Font Awesome Free icon artwork uses CC BY 4.0. Preserve those notices when redistributing the assets. Timeline group titles support these identifiers through groupIcons.