Properties
Icons

Icons

To replace the icons, you can provide render callbacks to the Vizzly.Dashboard through React props.

import Vizzly from '@vizzly/dashboard';
 
const CustomComponent = () => <p>Your react component</p>
 
<Vizzly.Dashboard
  renderUndoIcon={CustomComponent}
  renderCompletedIcon={CustomComponent}
  renderInProgressIcon={CustomComponent}
  renderDeleteIcon={CustomComponent}
  renderPlusIcon={CustomComponent}
  renderCloseIcon={CustomComponent}
  renderFilterIcon={CustomComponent}
  renderEditIcon={CustomComponent}
  renderComponentOptionsMenuIcon={CustomComponent}
  renderMergeCellIcon={CustomComponent}
  renderSplitCellIcon={CustomComponent}
  renderDownloadIcon={CustomComponent}
  renderInsertRowBelowIcon={CustomComponent}
  renderInsertRowAboveIcon={CustomComponent}
  renderAppendCellIcon={CustomComponent}
  renderLibraryIcon={CustomComponent}
  renderCreateComponentIcon={CustomComponent}
  renderAccordionIcon={CustomComponent}
 
  // Rest of the dashboard props ...
/>

To make improve the discoverability of replaceable icons, you can use the developerTools prop to highlight the icons which can be replaced with a red border.