Icons - Datahub — ContextQMD

import { Meta, Source } from '@storybook/blocks';

import { AVAILABLE_ICONS } from '@components';

import { IconGalleryWithSearch } from './mdx-components';

<Meta title="Icons" /> <div className="custom-docs"> ## Icons

Under the hood, we're utilizing the Material Design Icon Library. However, we've crafted out own resuable component to make it easier to use these icons in our application.

<a href="/?path=/docs/media-icon--docs">
	View the component documentation to learn more
</a>

In addition to using Materials Design Icons, we've also added a few custom icons to the library. You can access them through the same `<Icon />` component and are represented in the list of available options below.

```tsx
import { Icon } from '@components';

<Icon icon="AccountCircle" />
```




### Gallery

There are {AVAILABLE_ICONS.length} icons available. 

Name values populate the `icon` prop on the `<Icon />` component.

<IconGalleryWithSearch icons={AVAILABLE_ICONS} />

</div>