icons

icons is an object within the theme property for overriding styles for icons shown at the top of dashboards.

To override styles for 'more' icons to the right of dashboard cells, use dashboard.

<Vizzly.Dashboard
  // ...
  theme={{
    icons: {
      color: "#414a59",
      "&:hover": {
        color: "#6a7383",
        background: "#f5f5f6",
      },
    },
  }}
/>

Icons

Icons refer to the download ('Download dashboard to PDF') and reset ('Reset dashboard to default') icons shown at the top right of <Vizzly.Dashboard/>.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    icons: {
      // Default Values
      borderRadius: "8px",
      color: "#414a59",
      padding: "4px",
      "&:hover": {
        color: "#6a7383",
        background: "#f5f5f6",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}