function MaterialIcon({ name, size = 20, active = false }) {
  return <span className="material-symbols-outlined" data-icon={name} data-active={active ? "true" : "false"} style={{ fontSize: size }} aria-hidden="true">{name}</span>;
}

const Icons = {
  dashboard: (props) => <MaterialIcon name="dashboard" {...props} />,
  project: (props) => <MaterialIcon name="architecture" {...props} />,
  schedule: (props) => <MaterialIcon name="calendar_view_month" {...props} />,
  viewTimeline: (props) => <MaterialIcon name="view_timeline" {...props} />,
  viewList: (props) => <MaterialIcon name="format_list_bulleted" {...props} />,
  quality: (props) => <MaterialIcon name="verified" {...props} />,
  users: (props) => <MaterialIcon name="groups" {...props} />,
  cart: (props) => <MaterialIcon name="inventory_2" {...props} />,
  finance: (props) => <MaterialIcon name="payments" {...props} />,
  settings: (props) => <MaterialIcon name="settings" {...props} />,
  plus: (props) => <MaterialIcon name="add" {...props} />,
  bell: (props) => <MaterialIcon name="notifications" {...props} />,
  camera: (props) => <MaterialIcon name="photo_camera" {...props} />,
  check: (props) => <MaterialIcon name="check_circle" {...props} />,
  alert: (props) => <MaterialIcon name="warning" {...props} />,
  mindMap: (props) => <MaterialIcon name="schema" {...props} />,
  edit: (props) => <MaterialIcon name="edit" {...props} />,
  close: (props) => <MaterialIcon name="close" {...props} />,
  chevronLeft: (props) => <MaterialIcon name="chevron_left" {...props} />,
  chevronRight: (props) => <MaterialIcon name="chevron_right" {...props} />,
  panelLeft: (props) => <MaterialIcon name="left_panel_close" {...props} />,
  panelRight: (props) => <MaterialIcon name="left_panel_open" {...props} />,
  trash: (props) => <MaterialIcon name="delete" {...props} />,
  moreVert: (props) => <MaterialIcon name="more_vert" {...props} />,
  tips: (props) => <MaterialIcon name="tips_and_updates" {...props} />,
  search: (props) => <MaterialIcon name="search" {...props} />,
  pin: (props) => <MaterialIcon name="location_on" {...props} />,
  myLocation: (props) => <MaterialIcon name="my_location" {...props} />,
  radar: (props) => <MaterialIcon name="radar" {...props} />,
  calendarMonth: (props) => <MaterialIcon name="calendar_month" {...props} />,
  payments: (props) => <MaterialIcon name="payments" {...props} />,
  link: (props) => <MaterialIcon name="link" {...props} />,
  linkOff: (props) => <MaterialIcon name="link_off" {...props} />,
  taskAlt: (props) => <MaterialIcon name="task_alt" {...props} />,
  construction: (props) => <MaterialIcon name="construction" {...props} />,
  errorOutline: (props) => <MaterialIcon name="error" {...props} />,
  warningAmber: (props) => <MaterialIcon name="warning_amber" {...props} />,
  event: (props) => <MaterialIcon name="event" {...props} />,
  trendingDown: (props) => <MaterialIcon name="trending_down" {...props} />,
  hourglass: (props) => <MaterialIcon name="hourglass_top" {...props} />
};

Object.assign(window, { Icons, MaterialIcon });