use symbols instead of icons

package.json

@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@aboutbits/pagination": "^2.0.2",
-    "@aboutbits/react-material-icons": "^1.2.5",
+    "@aboutbits/react-material-icons": "github:aboutbits/react-material-icons#update-to-symbols",
     "@aboutbits/react-toolbox": "^0.2.5",
     "@floating-ui/react": "^0.26.10",
     "@headlessui/react": "^1.7.18",
@@ -89,6 +89,7 @@
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.19",
+    "axios-mock-adapter": "^1.22.0",
     "cssnano": "^6.1.1",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
@@ -113,8 +114,7 @@
     "typescript": "^5.4.3",
     "vite": "^4.4.3",
     "vitest": "^0.33.0",
-    "zod": "^3.22.4",
-    "axios-mock-adapter": "^1.22.0"
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "@aboutbits/react-pagination": "^3.0.3",

src/components/alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconCheck from '@aboutbits/react-material-icons/dist/IconCheckOutlined'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoIOutlined'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningOutlined'
 import {
   Controls,
   Markdown,

src/components/alert/ConvenientAlerts.tsx

@@ -1,6 +1,6 @@
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconCheck from '@aboutbits/react-material-icons/dist/IconCheckRoundedFilled'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRoundedFilled'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRoundedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../types'
 import { Alert } from './Alert'

src/components/button/Button.stories.tsx

@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAddRounded'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
 import {
   Controls,
   Description,

src/components/button/ButtonIcon.stories.tsx

@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddRounded from '@aboutbits/react-material-icons/dist/IconAddRounded'
+import IconInfoRounded from '@aboutbits/react-material-icons/dist/IconInfoRounded'
 import {
   Controls,
   Description,
@@ -19,8 +19,8 @@ import { ButtonVariant } from './types'
 const icons = {
   options: ['Info', 'Add'],
   mapping: {
-    Info: IconInfo,
-    Add: IconAdd,
+    Info: IconInfoRounded,
+    Add: IconAddRounded,
   },
 }
 
@@ -32,7 +32,7 @@ const meta = {
     variant: ButtonVariant.Solid,
     size: Size.Md,
     tone: Tone.Primary,
-    icon: IconAdd,
+    icon: IconAddRounded,
   },
   argTypes: {
     icon: icons,

src/components/button/ButtonIconLink.stories.tsx

@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAddRounded'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
 import {
   Controls,
   Description,

src/components/button/ButtonLink.stories.tsx

@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAddRounded'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
 import {
   Controls,
   Description,

src/components/button/SubmitButton.stories.tsx

@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAddRounded'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
 import {
   Controls,
   Description,

src/components/content/ContentMessage/ContentMessage.stories.tsx

@@ -1,6 +1,6 @@
-import IconError from '@aboutbits/react-material-icons/dist/IconError'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconError from '@aboutbits/react-material-icons/dist/IconErrorRounded'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRounded'
 import {
   Controls,
   Description,

src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx

@@ -1,5 +1,5 @@
-import IconList from '@aboutbits/react-material-icons/dist/IconList'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconList from '@aboutbits/react-material-icons/dist/IconListRoundedFilled'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRoundedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../../types'
 import {

src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx

@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconClose from '@aboutbits/react-material-icons/dist/IconCloseRounded'
 import { ComponentType, ReactElement } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'

src/components/dialog/DialogItem/DialogListItemButton.tsx

@@ -1,4 +1,4 @@
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightRounded'
 import classNames from 'classnames'
 import { MouseEventHandler, forwardRef } from 'react'
 import { useTheme } from '../../../framework'

src/components/files/DeleteFileAction.tsx

@@ -1,4 +1,4 @@
-import IconDelete from '@aboutbits/react-material-icons/dist/IconDelete'
+import IconDelete from '@aboutbits/react-material-icons/dist/IconDeleteRoundedFilled'
 import { useState } from 'react'
 import { useInternationalization } from '../../framework'
 import { ButtonVariant } from '../button'

src/components/files/DownloadFileAction.tsx

@@ -1,4 +1,4 @@
-import IconDownload from '@aboutbits/react-material-icons/dist/IconDownload'
+import IconDownload from '@aboutbits/react-material-icons/dist/IconDownloadRounded'
 import { useState } from 'react'
 import { useInternationalization } from '../../framework'
 import { ButtonVariant } from '../button'

src/components/files/FileDropZone.tsx

@@ -1,4 +1,4 @@
-import IconUploadFile from '@aboutbits/react-material-icons/dist/IconUploadFile'
+import IconUploadFile from '@aboutbits/react-material-icons/dist/IconUploadFileRounded'
 import classNames from 'classnames'
 import { ChangeEventHandler, useRef } from 'react'
 import { useInternationalization, useTheme } from '../../framework'

src/components/files/FileListItem.tsx

@@ -1,5 +1,5 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle'
-import IconInsertDriveFile from '@aboutbits/react-material-icons/dist/IconInsertDriveFile'
+import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircleRoundedFilled'
+import IconDraftRounded from '@aboutbits/react-material-icons/dist/IconDraftRoundedFilled'
 import classNames from 'classnames'
 import { ReactNode, useEffect, useState } from 'react'
 import { useInternationalization, useTheme } from '../../framework'
@@ -88,7 +88,7 @@ export function FileListItem<TRemoteFile>({
                 className={classNames(files.icon.size, files.icon.success)}
               />
             ) : (
-              <IconInsertDriveFile
+              <IconDraftRounded
                 className={classNames(
                   files.icon.size,
                   disabled

src/components/files/theme.ts

@@ -26,7 +26,7 @@ export default {
     },
     size: 'h-6 w-6',
     error: 'fill-critical-800',
-    default: 'fill-primary-800',
+    default: 'fill-primary-800 ',
     success: 'fill-success-800',
     disabled: 'fill-neutral-800',
   },

src/components/form/InputField.stories.tsx

@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadge from '@aboutbits/react-material-icons/dist/IconBadgeRounded'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import {
   Controls,
   Description,

src/components/form/SearchField.tsx

@@ -1,4 +1,4 @@
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import { forwardRef } from 'react'
 import { useInternationalization } from '../../framework'
 import { InputField, InputFieldProps } from './InputField'

src/components/form/primitive/Input.stories.tsx

@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadge from '@aboutbits/react-material-icons/dist/IconBadgeRounded'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import {
   Controls,
   Description,

src/components/form/primitive/InputIcon/InputIcon.stories.tsx

@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadge from '@aboutbits/react-material-icons/dist/IconBadgeRounded'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import {
   Controls,
   Description,

src/components/header/actions/HeaderBackAction.tsx

@@ -1,4 +1,4 @@
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
+import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBackRounded'
 import { ComponentProps, ComponentType } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'

src/components/header/actions/HeaderCloseAction.tsx

@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconClose from '@aboutbits/react-material-icons/dist/IconCloseRounded'
 import { ComponentType, ReactElement } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'

src/components/menu/Menu.stories.tsx

@@ -1,5 +1,5 @@
-import IconArrowDropUp from '@aboutbits/react-material-icons/dist/IconArrowDropUp'
-import IconMoreVert from '@aboutbits/react-material-icons/dist/IconMoreVert'
+import IconArrowDropUp from '@aboutbits/react-material-icons/dist/IconArrowDropUpRounded'
+import IconMoreVert from '@aboutbits/react-material-icons/dist/IconMoreVertRounded'
 import { action } from '@storybook/addon-actions'
 import {
   Controls,

src/components/pagination/PaginationPreviousNextContent.tsx

@@ -1,5 +1,5 @@
-import IconKeyboardArrowLeft from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeft'
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowLeft from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeftRounded'
+import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightRounded'
 import { ReactElement } from 'react'
 import { useInternationalization, useTheme } from '../../framework'
 

src/components/react-hook-form/DateFormField.stories.tsx

@@ -1,5 +1,5 @@
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRounded'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {

src/components/react-hook-form/FormSubmitFeedback.stories.mdx

@@ -1,5 +1,5 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle'
-import IconSave from '@aboutbits/react-material-icons/dist/IconSave'
+import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircleRounded'
+import IconSave from '@aboutbits/react-material-icons/dist/IconSaveRounded'
 import { action } from '@storybook/addon-actions'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { useForm } from 'react-hook-form'

src/components/react-hook-form/FormSubmitFeedback.tsx

@@ -1,4 +1,4 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle'
+import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircleRounded'
 import classNames from 'classnames'
 import { ComponentType, ReactElement, ReactNode } from 'react'
 import { useInternationalization, useTheme } from '../../framework'

src/components/react-hook-form/InputFormField.stories.tsx

@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadge from '@aboutbits/react-material-icons/dist/IconBadgeRounded'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {

src/components/react-hook-form/NumberFormField.stories.tsx

@@ -1,5 +1,5 @@
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfoRounded'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRounded'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {

src/components/react-hook-form/SearchFormField.tsx

@@ -1,4 +1,4 @@
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import { ForwardedRef, forwardRef } from 'react'
 import { FieldPath, FieldValues } from 'react-hook-form'
 import { useInternationalization } from '../../framework'

src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx

@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearch from '@aboutbits/react-material-icons/dist/IconSearchRounded'
 import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/routers/inMemory'
 import { AsyncView } from '@aboutbits/react-toolbox'
 import { ReactElement, ReactNode } from 'react'

src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx

@@ -1,5 +1,5 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
-import IconKeyboardArrowDown from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDown'
+import IconClose from '@aboutbits/react-material-icons/dist/IconCloseRounded'
+import IconKeyboardArrowDown from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDownRounded'
 import classNames from 'classnames'
 import { ReactNode, useMemo, useRef } from 'react'
 import { useInternationalization, useTheme } from '../../../framework'

src/components/section/Section/ConvenientSectionContentMessage.tsx

@@ -1,5 +1,5 @@
-import IconList from '@aboutbits/react-material-icons/dist/IconList'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconList from '@aboutbits/react-material-icons/dist/IconListRoundedFilled'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarningRoundedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../../types'
 import {

src/components/section/SectionItem/SectionListItem.tsx

@@ -1,4 +1,4 @@
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightRounded'
 import classNames from 'classnames'
 import { ReactNode, forwardRef } from 'react'
 import {

src/examples/Form.stories.tsx

@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
+import IconCheck from '@aboutbits/react-material-icons/dist/IconCheckRounded'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import { Markdown, Primary, Title } from '@storybook/addon-docs'

src/examples/List.stories.tsx

@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
+import IconAdd from '@aboutbits/react-material-icons/dist/IconAddRounded'
 import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
 import { action } from '@storybook/addon-actions'
 import { Markdown } from '@storybook/addon-docs'