new react material icons

package.json

@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@aboutbits/pagination": "^2.0.2",
-    "@aboutbits/react-material-icons": "^1.2.5",
+    "@aboutbits/react-material-icons": "^2.0.0",
     "@aboutbits/react-toolbox": "^0.2.5",
     "@floating-ui/react": "^0.26.10",
     "@headlessui/react": "^1.7.18",

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 IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import {
   Controls,
   Markdown,
@@ -26,9 +26,9 @@ const icons = {
   options: ['None', 'Warning', 'Check', 'Info'],
   mapping: {
     None: undefined,
-    Warning: IconWarning,
-    Check: IconCheck,
-    Info: IconInfo,
+    Warning: IconWarningOutlinedFilled,
+    Check: IconCheckOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
   control: { type: 'select' },
 }
@@ -88,7 +88,7 @@ const meta = {
     children:
       'This alert component can be used to highlight a message to the user.',
     tone: Tone.Critical,
-    icon: IconWarning,
+    icon: IconWarningOutlinedFilled,
   },
   argTypes: {
     title: { control: 'text' },
@@ -169,7 +169,7 @@ export const ConvinientAlertComponents: Story = {
 
 export const ActionsResponsive: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.Responsive,
@@ -186,7 +186,7 @@ export const ActionsResponsive: Story = {
 
 export const ActionsFixedRight: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.FixedRight,
@@ -207,7 +207,7 @@ export const ActionsFixedRight: Story = {
 
 export const ActionsFixedBottom: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.FixedBottom,
@@ -228,7 +228,7 @@ export const ActionsFixedBottom: Story = {
 
 export const VeryLongMessage: Story = {
   args: {
-    icon: IconWarning,
+    icon: IconWarningOutlinedFilled,
     tone: Tone.Critical,
   },
   render: (args) => (

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 IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../types'
 import { Alert } from './Alert'
@@ -11,7 +11,7 @@ export function AlertSuccess({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Success} icon={IconCheck} {...props}>
+    <Alert tone={Tone.Success} icon={IconCheckOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -22,7 +22,7 @@ export function AlertWarning({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Warning} icon={IconWarning} {...props}>
+    <Alert tone={Tone.Warning} icon={IconWarningOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -33,7 +33,7 @@ export function AlertCritical({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Critical} icon={IconWarning} {...props}>
+    <Alert tone={Tone.Critical} icon={IconWarningOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -44,7 +44,7 @@ export function AlertInformative({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Informative} icon={IconInfo} {...props}>
+    <Alert tone={Tone.Informative} icon={IconInfoOutlinedFilled} {...props}>
       {children}
     </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 IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -22,8 +22,8 @@ const icons = {
   options: ['None', 'Add', 'Info'],
   mapping: {
     None: undefined,
-    Add: IconAdd,
-    Info: IconInfo,
+    Add: IconAddOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
 }
 
@@ -111,12 +111,12 @@ export const Disabled: Story = {
 
 export const IconStart: Story = {
   args: {
-    iconStart: IconInfo,
+    iconStart: IconInfoOutlinedFilled,
   },
 }
 export const IconEnd: Story = {
   args: {
-    iconEnd: IconInfo,
+    iconEnd: IconInfoOutlinedFilled,
   },
 }
 

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 IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -19,8 +19,8 @@ import { ButtonVariant } from './types'
 const icons = {
   options: ['Info', 'Add'],
   mapping: {
-    Info: IconInfo,
-    Add: IconAdd,
+    Info: IconInfoOutlinedFilled,
+    Add: IconAddOutlinedFilled,
   },
 }
 
@@ -32,7 +32,7 @@ const meta = {
     variant: ButtonVariant.Solid,
     size: Size.Md,
     tone: Tone.Primary,
-    icon: IconAdd,
+    icon: IconAddOutlinedFilled,
   },
   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 IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -22,7 +22,7 @@ const meta = {
     variant: ButtonVariant.Solid,
     size: Size.Md,
     tone: Tone.Primary,
-    icon: IconAdd,
+    icon: IconAddOutlinedFilled,
   },
   argTypes: {
     mode: {
@@ -44,8 +44,8 @@ const meta = {
     icon: {
       options: ['Info', 'Add'],
       mapping: {
-        Info: IconInfo,
-        Add: IconAdd,
+        Info: IconInfoOutlinedFilled,
+        Add: IconAddOutlinedFilled,
       },
       control: { type: 'select' },
     },

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 IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -48,12 +48,20 @@ const meta = {
     },
     iconStart: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
     iconEnd: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
   },

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 IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -18,12 +18,20 @@ const meta = {
   argTypes: {
     iconStart: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
     iconEnd: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
   },

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 IconErrorOutlinedFilled from '@aboutbits/react-material-icons/dist/IconErrorOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import {
   Controls,
   Description,
@@ -19,16 +19,16 @@ const meta = {
   args: {
     title: 'No items',
     text: 'No data available for this view',
-    icon: IconInfo,
+    icon: IconInfoOutlinedFilled,
   },
   argTypes: {
     icon: {
       options: ['None', 'Info', 'Warning', 'Error'],
       mapping: {
         None: undefined,
-        Info: IconInfo,
-        Warning: IconWarning,
-        Error: IconError,
+        Info: IconInfoOutlinedFilled,
+        Warning: IconWarningOutlinedFilled,
+        Error: IconErrorOutlinedFilled,
       },
       control: { type: 'select' },
     },

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 IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../../types'
 import {
@@ -8,14 +8,14 @@ import {
 } from './DialogContentMessage'
 
 export function DialogContentError({
-  icon: Icon = IconWarning,
+  icon: Icon = IconWarningOutlinedFilled,
   ...props
 }: Omit<DialogContentMessageProps, 'tone'>): ReactElement {
   return <DialogContentMessage tone={Tone.Critical} icon={Icon} {...props} />
 }
 
 export function DialogContentEmpty({
-  icon: Icon = IconList,
+  icon: Icon = IconListOutlinedFilled,
   ...props
 }: Omit<DialogContentMessageProps, 'tone'>): ReactElement {
   return <DialogContentMessage tone={Tone.Neutral} icon={Icon} {...props} />

src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx

@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { ComponentType, ReactElement } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'
@@ -18,7 +18,7 @@ export type DialogHeaderCloseActionProps = Omit<
 }
 
 export function DialogHeaderCloseAction({
-  icon = IconClose,
+  icon = IconCloseOutlinedFilled,
   label,
   ...props
 }: DialogHeaderCloseActionProps): ReactElement {

src/components/dialog/DialogItem/DialogListItemButton.tsx

@@ -1,4 +1,4 @@
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled'
 import classNames from 'classnames'
 import { MouseEventHandler, forwardRef } from 'react'
 import { useTheme } from '../../../framework'
@@ -32,7 +32,7 @@ export const DialogListItemButton = forwardRef<
       {...props}
     >
       {children}
-      <IconKeyboardArrowRight
+      <IconKeyboardArrowRightOutlinedFilled
         width="24"
         height="24"
         className={dialog.listItemButton.icon}