stream-chat-react-native-core 9.6.2-beta.4 → 9.7.0-beta.1

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -6,11 +6,27 @@ import React, { PropsWithChildren, useContext, useMemo } from 'react';
  * Adding a new default automatically makes it available as an override.
  *
  * Every key is optional — only specify the components you want to override.
+ *
+ * The `icons` slot is a nested map: it is typed as a *partial* icon map so
+ * integrators can override individual icons without having to supply them all.
+ * Sibling defaults are preserved via a deep merge (see below).
  */
-export type ComponentOverrides = Partial<
-  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+export type ComponentOverrides = Omit<
+  Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>,
+  'icons'
 > &
-  import('./defaultComponents').OptionalComponentOverrides;
+  import('./defaultComponents').OptionalComponentOverrides & {
+    icons?: Partial<import('./defaultComponents').IconsMap>;
+  };
+
+/**
+ * Resolved component overrides with defaults filled in. Unlike
+ * `ComponentOverrides`, the `icons` map is guaranteed fully populated (defaults
+ * back every key), so consumers can read `icons.Mute` without a null check.
+ */
+export type ResolvedComponents = Required<Omit<ComponentOverrides, 'icons'>> & {
+  icons: import('./defaultComponents').IconsMap;
+};
 
 const ComponentsContext = React.createContext<ComponentOverrides>({});
 
@@ -33,8 +49,17 @@ export const WithComponents = ({
   overrides,
 }: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
   const parent = useContext(ComponentsContext);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  const merged = useMemo(
+    () => ({
+      ...parent,
+      ...overrides,
+      // Deep-merge the nested `icons` map so overriding one icon keeps the
+      // rest (a shallow spread would replace the whole map).
+      icons: { ...parent.icons, ...overrides.icons },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
   return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
 };
 
@@ -55,9 +80,14 @@ const getDefaults = (): ComponentOverrides => {
  */
 export const useComponentsContext = () => {
   const overrides = useContext(ComponentsContext);
-  return useMemo(
-    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+  return useMemo(() => {
+    const defaults = getDefaults();
+    return {
+      ...defaults,
+      ...overrides,
+      // Deep-merge icons so user overrides layer over the full default map.
+      icons: { ...defaults.icons, ...overrides.icons },
+    } as ResolvedComponents;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-    [],
-  );
+  }, []);
 };

package/src/contexts/componentsContext/defaultComponents.ts

@@ -186,6 +186,90 @@ import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
 import { SvgAwareImage } from '../../components/UIComponents/SvgAwareImage';
 import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 import type { MessageActionsProps } from '../../contexts/overlayContext/MessageOverlayHostLayer';
+import { ArrowUp, Down } from '../../icons/arrow-up';
+import { ArrowUpRight } from '../../icons/arrow-up-right';
+import { Sound } from '../../icons/audio';
+import { Bell } from '../../icons/bell';
+import { Lightning } from '../../icons/bolt';
+import { Camera } from '../../icons/camera';
+import { Check, Tick } from '../../icons/checkmark';
+import { Checkmark } from '../../icons/checkmark-1';
+import { CheckAll } from '../../icons/checks';
+import { ChevronLeft } from '../../icons/chevron-left';
+import { ChevronRight } from '../../icons/chevron-right';
+import { ChevronUp } from '../../icons/chevron-up';
+import { Time } from '../../icons/clock';
+import { CommandsIcon } from '../../icons/command';
+import { Copy } from '../../icons/copy';
+import { Delete } from '../../icons/delete';
+import { Edit } from '../../icons/edit';
+import { Smile } from '../../icons/emoji';
+import { MoreEmojis } from '../../icons/emoji-add-1';
+import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
+import { Exclamation } from '../../icons/exclamation-mark-fill';
+import { Warning } from '../../icons/exclamation-triangle-fill';
+import { EyeOpen } from '../../icons/EyeOpen';
+import { File, FilePickerIcon } from '../../icons/file';
+import { Audio } from '../../icons/filetype-audio-xl';
+import { Code } from '../../icons/filetype-code-xl';
+import { ZIP } from '../../icons/filetype-compression-xl';
+import { OtherFileIcon } from '../../icons/filetype-other-xl';
+import { PDF } from '../../icons/filetype-pdf-xl';
+import { Presentation } from '../../icons/filetype-presentation-xl';
+import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
+import { DOC } from '../../icons/filetype-text-xl';
+import { Video } from '../../icons/filetype-video-xl';
+import { Flag, MessageFlag } from '../../icons/flag';
+import { Folder } from '../../icons/folder';
+import { ImageGrid } from '../../icons/gallery';
+import { Giphy as GiphyFiletypeIcon, GiphyIcon } from '../../icons/giphy';
+import { PhotoIcon, Picture } from '../../icons/image';
+import { Imgur } from '../../icons/imgur';
+import { InfoTooltip } from '../../icons/info';
+import { ArrowBoxLeft } from '../../icons/leave';
+import { Link } from '../../icons/link';
+import { Loading } from '../../icons/loading';
+import { MapPin } from '../../icons/location';
+import { Lock } from '../../icons/lock';
+import { Megaphone } from '../../icons/megaphone';
+import { MessageBubbleEmpty } from '../../icons/message-bubble';
+import { Minus } from '../../icons/minus';
+import { CircleMinus } from '../../icons/minus-circle';
+import { MenuPointHorizontal } from '../../icons/more';
+import { Mute } from '../../icons/mute';
+import { BlockUser, CircleBan } from '../../icons/no-sign';
+import { UnreadIndicator } from '../../icons/notification';
+import { Pause } from '../../icons/pause-fill';
+import { Pin } from '../../icons/pin';
+import { Play } from '../../icons/play-fill';
+import { Plus } from '../../icons/plus';
+import { PollIcon, PollThumbnail } from '../../icons/poll';
+import { Reload } from '../../icons/refresh';
+import { DotGrid } from '../../icons/reorder';
+import { ArrowShareLeft, CurveLineLeftUp } from '../../icons/reply';
+import { ReplyConnectorLeft } from '../../icons/ReplyConnectorLeft';
+import { ReplyConnectorRight } from '../../icons/ReplyConnectorRight';
+import { Resend } from '../../icons/Retry';
+import { Bookmark } from '../../icons/save';
+import { Search } from '../../icons/search';
+import { SendRight } from '../../icons/send';
+import { Share } from '../../icons/share';
+import { Shield } from '../../icons/shield';
+import { Stop } from '../../icons/stop-fill';
+import { ThreadReply } from '../../icons/thread';
+import { Unknown } from '../../icons/Unknown';
+import { Unlock } from '../../icons/unlock';
+import { Unpin } from '../../icons/unpin';
+import { UserAdd } from '../../icons/user-add';
+import { UserDelete } from '../../icons/user-remove';
+import { PeopleIcon } from '../../icons/users';
+import type { IconProps } from '../../icons/utils/base';
+import { VideoIcon } from '../../icons/video';
+import { Recorder } from '../../icons/video-fill';
+import { Mic } from '../../icons/voice';
+import { XCircle } from '../../icons/x-circle';
+import { NewClose } from '../../icons/xmark';
+import { Cross } from '../../icons/xmark-1';
 
 /**
  * Normalizes each component entry to React.ComponentType<P>, stripping
@@ -197,7 +281,116 @@ type NormalizeComponents<T> = {
   [K in keyof T]: T[K] extends React.ComponentType<infer P> ? React.ComponentType<P> : T[K];
 };
 
+/**
+ * All overridable icon components in the SDK, keyed by their exported name.
+ * Exposed via `WithComponents` under the nested `icons` key so integrators can
+ * swap any icon: `<WithComponents overrides={{ icons: { Mute: MyMute } }}>`.
+ *
+ * Only icons that are actually rendered by the SDK are registered here.
+ */
+export const defaultIcons = {
+  ArrowBoxLeft,
+  ArrowShareLeft,
+  ArrowUp,
+  ArrowUpRight,
+  Audio,
+  Bell,
+  BlockUser,
+  Bookmark,
+  Camera,
+  Check,
+  CheckAll,
+  Checkmark,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleBan,
+  CircleMinus,
+  Code,
+  CommandsIcon,
+  Copy,
+  Cross,
+  CurveLineLeftUp,
+  Delete,
+  DOC,
+  DotGrid,
+  Down,
+  Edit,
+  Exclamation,
+  ExclamationCircle,
+  EyeOpen,
+  File,
+  FilePickerIcon,
+  Flag,
+  Folder,
+  Giphy: GiphyFiletypeIcon,
+  GiphyIcon,
+  ImageGrid,
+  Imgur,
+  InfoTooltip,
+  Lightning,
+  Link,
+  Loading,
+  Lock,
+  MapPin,
+  Megaphone,
+  MenuPointHorizontal,
+  MessageBubbleEmpty,
+  MessageFlag,
+  Mic,
+  Minus,
+  MoreEmojis,
+  Mute,
+  NewClose,
+  OtherFileIcon,
+  Pause,
+  PDF,
+  PeopleIcon,
+  PhotoIcon,
+  Picture,
+  Pin,
+  Play,
+  Plus,
+  PollIcon,
+  PollThumbnail,
+  Presentation,
+  Recorder,
+  Reload,
+  ReplyConnectorLeft,
+  ReplyConnectorRight,
+  Resend,
+  Search,
+  SendRight,
+  Share,
+  Shield,
+  Smile,
+  Sound,
+  SpreadSheet,
+  Stop,
+  ThreadReply,
+  Tick,
+  Time,
+  Unknown,
+  Unlock,
+  Unpin,
+  UnreadIndicator,
+  UserAdd,
+  UserDelete,
+  Video,
+  VideoIcon,
+  Warning,
+  XCircle,
+  ZIP,
+} satisfies Record<string, React.ComponentType<IconProps>>;
+
+/**
+ * Map of all overridable SDK icons. Used to type the `icons` override slot
+ * and the resolved value returned by `useComponentsContext().icons`.
+ */
+export type IconsMap = typeof defaultIcons;
+
 const components = {
+  icons: defaultIcons,
   Attachment,
   AttachmentUploadIndicator,
   AttachButton,

package/src/contexts/pollContext/pollContext.tsx

@@ -29,7 +29,7 @@ export const usePollContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useCreatePollContext hook was called outside of the PollContext provider. Make sure you have configured the Poll component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel',
+      'The usePollContext hook was called outside of the PollContext provider. Make sure you have configured the Poll component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel',
     );
   }
 

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -5,6 +5,7 @@ import type { Channel, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import * as useIsChannelMutedModule from '../../../components/ChannelPreview/hooks/useIsChannelMuted';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelMembershipStateModule from '../../useChannelMembershipState';
@@ -219,6 +220,7 @@ describe('useChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: expect.any(Function),
         userMuteActive: false,
       },
@@ -246,6 +248,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -259,6 +262,7 @@ describe('getChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userMuteActive: false,
       },
@@ -291,6 +295,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -339,6 +344,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -356,6 +362,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -374,6 +381,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -399,6 +407,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: true,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -420,6 +429,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -439,6 +449,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'details',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -456,6 +467,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -472,6 +484,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -490,6 +503,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -516,6 +530,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });

package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx

@@ -6,6 +6,7 @@ import type { Channel, ChannelMemberResponse, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelOwnCapabilitiesModule from '../../useChannelOwnCapabilities';
@@ -227,6 +228,7 @@ describe('useChannelMemberActionItems', () => {
         channelActions,
         isBlocked: false,
         isCurrentUser: false,
+        icons: defaultIcons,
         member,
         ownCapabilities: [],
         t: expect.any(Function),
@@ -253,6 +255,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -273,6 +276,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: true,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -290,6 +294,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: ['update-channel-members'],
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -310,6 +315,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -329,6 +335,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -347,6 +354,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -360,6 +368,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
         isCurrentUser: false,
         member,
         ownCapabilities: undefined,
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userActions: actions,
         userMuteActive: false,

package/src/hooks/actions/useChannelActionItems.tsx

@@ -14,13 +14,28 @@ import {
 import { useIsChannelMuted } from '../../components/ChannelPreview/hooks/useIsChannelMuted';
 import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
 import { useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import type { IconsMap } from '../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
-import { IconProps, Mute, BlockUser, Delete, Pin, Sound, Unpin } from '../../icons';
-import { ArrowBoxLeft } from '../../icons/leave';
+import { IconProps } from '../../icons';
 import { useChannelMembershipState } from '../useChannelMembershipState';
 import { useIsDirectChat } from '../useIsDirectChat';
 import { useStateStore } from '../useStateStore';
 
+// Lazily resolved to avoid a static import cycle with defaultComponents.ts
+// (defaultComponents → ChannelDetails*/ChannelPreview* → this file). Statically
+// importing defaultIcons corrupts module-init order; require it at call time
+// instead. Same pattern as ComponentsContext's getDefaults().
+let cachedDefaultIcons: IconsMap | undefined;
+const getDefaultIcons = (): IconsMap => {
+  if (!cachedDefaultIcons) {
+    cachedDefaultIcons = (
+      require('../../contexts/componentsContext/defaultComponents') as { defaultIcons: IconsMap }
+    ).defaultIcons;
+  }
+  return cachedDefaultIcons;
+};
+
 export type ChannelActionItem = ActionItem<
   'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | 'pin' | string
 > & {
@@ -63,6 +78,7 @@ export type ChannelActionItemsParams = {
   actions: ChannelActions;
   channel: Channel;
   channelMuteActive: boolean;
+  icons: IconsMap;
   isArchived: boolean;
   isBlocked: boolean | undefined;
   isDirectChat: boolean;
@@ -73,7 +89,7 @@ export type ChannelActionItemsParams = {
 };
 
 export type BuildDefaultChannelActionItems = (
-  channelActionItemsParams: ChannelActionItemsParams,
+  channelActionItemsParams: Omit<ChannelActionItemsParams, 'icons'> & { icons?: IconsMap },
 ) => ChannelActionItem[];
 
 const ChannelActionsIcon = ({
@@ -104,6 +120,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       unpin,
     },
     channelMuteActive,
+    icons = getDefaultIcons(),
     isBlocked,
     isDirectChat,
     isPinned,
@@ -119,9 +136,9 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       action: channelMuteActive ? unmuteChannel : muteChannel,
       Icon: (props) =>
         channelMuteActive ? (
-          <Sound width={20} height={20} {...props} />
+          <icons.Sound width={20} height={20} {...props} />
         ) : (
-          <Mute
+          <icons.Mute
             width={20}
             height={20}
             {...props}
@@ -145,7 +162,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
   if (surface !== 'details') {
     actionItems.push({
       action: isPinned ? unpin : pin,
-      Icon: (props) => <ChannelActionsIcon Icon={isPinned ? Unpin : Pin} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={isPinned ? icons.Unpin : icons.Pin} {...props} />,
       id: 'pin',
       label: isDirectChat
         ? isPinned
@@ -164,10 +181,10 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       action: userMuteActive ? unmuteUser : muteUser,
       Icon: (props) =>
         userMuteActive ? (
-          <ChannelActionsIcon Icon={Sound} {...props} />
+          <ChannelActionsIcon Icon={icons.Sound} {...props} />
         ) : (
           <ChannelActionsIcon
-            Icon={Mute}
+            Icon={icons.Mute}
             {...props}
             fill={props.fill ?? props.stroke}
             stroke={undefined}
@@ -204,7 +221,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 
     actionItems.push({
       action: isBlocked ? unblockUser : blockUserWithConfirmation,
-      Icon: (props) => <ChannelActionsIcon Icon={BlockUser} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={icons.BlockUser} {...props} />,
       id: 'block',
       label: isBlocked ? t('Unblock User') : t('Block User'),
       placement: 'sheet',
@@ -245,7 +262,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 
   actionItems.push({
     action: leaveWithConfirmation,
-    Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,
+    Icon: (props) => <ChannelActionsIcon Icon={icons.ArrowBoxLeft} {...props} />,
     id: 'leave',
     label: isDirectChat ? t('Leave Chat') : t('Leave Group'),
     placement: 'sheet',
@@ -274,7 +291,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
           },
         ]);
       },
-      Icon: (props) => <ChannelActionsIcon Icon={Delete} {...props} />,
+      Icon: (props) => <ChannelActionsIcon Icon={icons.Delete} {...props} />,
       id: 'deleteChannel',
       label: isDirectChat ? t('Delete Chat') : t('Delete Group'),
       placement: 'sheet',
@@ -307,6 +324,7 @@ export const useChannelActionItems = ({
   getChannelActionItems: getChannelActionItemsProp = getChannelActionItems,
 }: UseChannelActionItemsParams) => {
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const membership = useChannelMembershipState(channel);
   const channelActions = useChannelActions(channel);
   const isDirectChat = useIsDirectChat(channel);
@@ -331,6 +349,7 @@ export const useChannelActionItems = ({
       actions: channelActions,
       channel,
       channelMuteActive,
+      icons,
       isArchived,
       isBlocked,
       isDirectChat,
@@ -343,6 +362,7 @@ export const useChannelActionItems = ({
       channel,
       channelActions,
       channelMuteActive,
+      icons,
       isArchived,
       isBlocked,
       isDirectChat,