removed the enum from SessionIconType. Just rely on the type itself

ts/components/ConversationListItem.tsx

@@ -22,7 +22,7 @@ import {
 } from '../state/ducks/conversations';
 import _ from 'underscore';
 import { useMembersAvatars } from '../hooks/useMembersAvatar';
-import { SessionIcon, SessionIconType } from './session/icon';
+import { SessionIcon } from './session/icon';
 import { useSelector } from 'react-redux';
 import { SectionType } from '../state/ducks/section';
 import { getFocusedSection } from '../state/selectors/section';
@@ -85,11 +85,7 @@ const HeaderItem = (props: {
 
   const pinIcon =
     isMessagesSection && isPinned ? (
-      <SessionIcon
+      <SessionIcon iconType="pin" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
-        iconType={SessionIconType.Pin}
-        iconColor={theme.colors.textColorSubtle}
-        iconSize={'tiny'}
-      />
     ) : null;
 
   const NotificationSettingIcon = () => {
@@ -102,19 +98,11 @@ const HeaderItem = (props: {
         return null;
       case 'disabled':
         return (
-          <SessionIcon
+          <SessionIcon iconType="mute" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
-            iconType={SessionIconType.Mute}
-            iconColor={theme.colors.textColorSubtle}
-            iconSize={'tiny'}
-          />
         );
       case 'mentions_only':
         return (
-          <SessionIcon
+          <SessionIcon iconType="bell" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
-            iconType={SessionIconType.BellMention}
-            iconColor={theme.colors.textColorSubtle}
-            iconSize={'tiny'}
-          />
         );
       default:
         return null;

ts/components/Lightbox.tsx

@@ -143,7 +143,7 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
     onClick();
   };
   let iconRotation = 0;
-  let iconType = SessionIconType.Chevron;
+  let iconType: SessionIconType = 'chevron';
   switch (type) {
     case 'next':
       iconRotation = 270;
@@ -152,10 +152,10 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
       iconRotation = 90;
       break;
     case 'close':
-      iconType = SessionIconType.Exit;
+      iconType = 'exit';
       break;
     case 'save':
-      iconType = SessionIconType.Upload;
+      iconType = 'upload';
       iconRotation = 180;
 
       break;

ts/components/conversation/ConversationHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Avatar, AvatarSize } from '../Avatar';
 
-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';
 
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { ConversationAvatar } from '../session/usingClosedConversationDetails';
@@ -84,11 +84,7 @@ const SelectionOverlay = (props: {
   return (
     <div className="message-selection-overlay">
       <div className="close-button">
-        <SessionIconButton
+        <SessionIconButton iconType="exit" iconSize={'medium'} onClick={onCloseOverlay} />
-          iconType={SessionIconType.Exit}
-          iconSize={'medium'}
-          onClick={onCloseOverlay}
-        />
       </div>
 
       <div className="button-group">
@@ -118,7 +114,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
         });
       }}
     >
-      <SessionIconButton iconType={SessionIconType.Ellipses} iconSize={'medium'} />
+      <SessionIconButton iconType="ellipses" iconSize={'medium'} />
     </div>
   );
 };
@@ -176,12 +172,7 @@ const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) =>
   }
 
   return (
-    <SessionIconButton
+    <SessionIconButton iconType="chevron" iconSize={'large'} iconRotation={90} onClick={onGoBack} />
-      iconType={SessionIconType.Chevron}
-      iconSize={'large'}
-      iconRotation={90}
-      onClick={onGoBack}
-    />
   );
 };
 

ts/components/conversation/DataExtractionNotification.tsx

@@ -3,7 +3,7 @@ import { useTheme } from 'styled-components';
 import { PropsForDataExtractionNotification } from '../../models/messageType';
 import { SignalService } from '../../protobuf';
 import { Flex } from '../basic/Flex';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { SpacerXS, Text } from '../basic/Text';
 import { ReadableMessage } from './ReadableMessage';
 
@@ -32,12 +32,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
         margin={theme.common.margins.sm}
         id={`msg-${messageId}`}
       >
-        <SessionIcon
+        <SessionIcon iconType="upload" theme={theme} iconSize={'small'} iconRotation={180} />
-          iconType={SessionIconType.Upload}
-          theme={theme}
-          iconSize={'small'}
-          iconRotation={180}
-        />
         <SpacerXS />
         <Text text={contentText} subtle={true} />
       </Flex>

ts/components/conversation/GroupInvitation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';
 import { useTheme } from 'styled-components';
 import { PropsForGroupInvitation } from '../../state/ducks/conversations';
 import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
@@ -27,7 +27,7 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
         <div className={classNames(classes)}>
           <div className="contents">
             <SessionIconButton
-              iconType={SessionIconType.Plus}
+              iconType="plus"
               iconColor={theme.colors.accent}
               theme={theme}
               iconSize={'large'}

ts/components/conversation/H5AudioPlayer.tsx

@@ -10,7 +10,7 @@ import {
   getSortedMessagesOfSelectedConversation,
 } from '../../state/selectors/conversations';
 import { getAudioAutoplay } from '../../state/selectors/userConfig';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 
 export const AudioPlayerWithEncryptedFile = (props: {
@@ -109,7 +109,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
       customIcons={{
         play: (
           <SessionIcon
-            iconType={SessionIconType.Play}
+            iconType="play"
             iconSize={'small'}
             iconColor={theme.colors.textColorSubtle}
             theme={theme}
@@ -117,7 +117,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
         ),
         pause: (
           <SessionIcon
-            iconType={SessionIconType.Pause}
+            iconType="pause"
             iconSize={'small'}
             iconColor={theme.colors.textColorSubtle}
             theme={theme}

ts/components/conversation/TimerNotification.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Intl } from '../Intl';
 
 import { missingCaseError } from '../../util/missingCaseError';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
 import { ReadableMessage } from './ReadableMessage';
 
@@ -46,11 +46,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
       <div className="module-timer-notification" id={`msg-${props.messageId}`}>
         <div className="module-timer-notification__message">
           <div>
-            <SessionIcon
+            <SessionIcon iconType="stopwatch" iconSize={'small'} iconColor={'#ABABAB'} />
-              iconType={SessionIconType.Stopwatch}
-              iconSize={'small'}
-              iconColor={'#ABABAB'}
-            />
           </div>
 
           <div>

ts/components/conversation/message/ClickToTrustSender.tsx

@@ -4,7 +4,7 @@ import { getMessageById, getMessagesByConversation } from '../../../data/data';
 import { getConversationController } from '../../../session/conversations';
 import { AttachmentDownloads } from '../../../session/utils';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';
 import { SessionButtonColor } from '../../session/SessionButton';
 
 const StyledTrustSenderUI = styled.div`
@@ -83,7 +83,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
 
   return (
     <StyledTrustSenderUI onClick={openConfirmationModal}>
-      <SessionIcon iconSize={'small'} iconType={SessionIconType.Gallery} />
+      <SessionIcon iconSize={'small'} iconType="gallery" />
       <ClickToDownload>{window.i18n('clickToTrustContact')}</ClickToDownload>
     </StyledTrustSenderUI>
   );

ts/components/conversation/message/MessagePreview.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { isImageAttachment } from '../../../types/Attachment';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';
 import { ImageGrid } from '../ImageGrid';
 import { Image } from '../Image';
 import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../Message';
@@ -63,7 +63,7 @@ export const MessagePreview = (props: Props) => {
           <div className="module-message__link-preview__icon_container">
             <div className="module-message__link-preview__icon_container__inner">
               <div className="module-message__link-preview__icon-container__circle-background">
-                <SessionIcon iconType={SessionIconType.Link} iconSize={'small'} />
+                <SessionIcon iconType="link" iconSize={'small'} />
               </div>
             </div>
           </div>

ts/components/conversation/message/OutgoingMessageStatus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { MessageDeliveryStatus } from '../../../models/messageType';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';
 
 const MessageStatusSendingContainer = styled.div`
   display: inline-block;
@@ -13,12 +13,7 @@ const MessageStatusSending = () => {
   const iconColor = useTheme().colors.textColor;
   return (
     <MessageStatusSendingContainer>
-      <SessionIcon
+      <SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize={'tiny'} />
-        rotateDuration={2}
-        iconColor={iconColor}
-        iconType={SessionIconType.Sending}
-        iconSize={'tiny'}
-      />
     </MessageStatusSendingContainer>
   );
 };
@@ -28,7 +23,7 @@ const MessageStatusSent = () => {
 
   return (
     <MessageStatusSendingContainer>
-      <SessionIcon iconColor={iconColor} iconType={SessionIconType.CircleCheck} iconSize={'tiny'} />
+      <SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize={'tiny'} />
     </MessageStatusSendingContainer>
   );
 };
@@ -38,11 +33,7 @@ const MessageStatusRead = () => {
 
   return (
     <MessageStatusSendingContainer>
-      <SessionIcon
+      <SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize={'tiny'} />
-        iconColor={iconColor}
-        iconType={SessionIconType.DoubleCheckCircleFilled}
-        iconSize={'tiny'}
-      />
     </MessageStatusSendingContainer>
   );
 };
@@ -51,11 +42,7 @@ const MessageStatusError = () => {
   const theme = useTheme();
   return (
     <MessageStatusSendingContainer title={window.i18n('sendFailed')}>
-      <SessionIcon
+      <SessionIcon iconColor={theme.colors.destructive} iconType="error" iconSize={'tiny'} />
-        iconColor={theme.colors.destructive}
-        iconType={SessionIconType.Error}
-        iconSize={'tiny'}
-      />
     </MessageStatusSendingContainer>
   );
 };

ts/components/dialog/EditProfileDialog.tsx

@@ -6,7 +6,7 @@ import { Avatar, AvatarSize } from '../Avatar';
 
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 
-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';
 import { PillDivider } from '../session/PillDivider';
 import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
 import { MAX_USERNAME_LENGTH } from '../session/registration/RegistrationStages';
@@ -72,7 +72,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
       viewEdit || viewQR
         ? [
             {
-              iconType: SessionIconType.Chevron,
+              iconType: 'chevron',
               iconRotation: 90,
               onClick: () => {
                 this.setState({ mode: 'default' });
@@ -149,7 +149,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
             />
             <div className="qr-view-button">
               <SessionIconButton
-                iconType={SessionIconType.QR}
+                iconType="qr"
                 iconSize={'small'}
                 iconColor={'rgb(0, 0, 0)'}
                 onClick={() => {
@@ -184,7 +184,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
         <div className="profile-name-uneditable">
           <p>{name}</p>
           <SessionIconButton
-            iconType={SessionIconType.Pencil}
+            iconType="pencil"
             iconSize={'medium'}
             onClick={() => {
               this.setState({ mode: 'edit' });

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../state/selectors/onions';
 import { getTheme } from '../../state/selectors/theme';
 import { Flex } from '../basic/Flex';
-import { SessionIcon, SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIcon, SessionIconButton } from '../session/icon';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 
@@ -123,7 +123,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
         iconColor={color}
         glowDuration={glowDuration}
         glowStartDelay={glowStartDelay}
-        iconType={SessionIconType.Circle}
+        iconType="circle"
         iconSize={'tiny'}
         theme={theme}
       />
@@ -160,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: {
   return (
     <SessionIconButton
       iconSize={'small'}
-      iconType={SessionIconType.Circle}
+      iconType="circle"
       iconColor={iconColor}
       onClick={handleClick}
       glowDuration={10}

ts/components/dialog/SessionModal.tsx

@@ -82,7 +82,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
               <div className="session-modal__header__close">
                 {showExitIcon ? (
                   <SessionIconButton
-                    iconType={SessionIconType.Exit}
+                    iconType="exit"
                     iconSize={'small'}
                     onClick={this.close}
                     theme={this.props.theme}

ts/components/dialog/SessionPasswordDialog.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { missingCaseError, PasswordUtil } from '../../util';
 import { ToastUtils } from '../../session/utils';
-import { SessionIconType } from '../session/icon';
 import { getPasswordHash } from '../../data/data';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 import { SpacerLG, SpacerSM } from '../basic/Text';
@@ -170,7 +169,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
       'setPasswordSuccessToast',
       window.i18n('setPasswordTitle'),
       window.i18n('setPasswordToastDescription'),
-      SessionIconType.Lock
+      'lock'
     );
 
     this.props.onOk();
@@ -209,7 +208,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
       'setPasswordSuccessToast',
       window.i18n('changePasswordTitle'),
       window.i18n('changePasswordToastDescription'),
-      SessionIconType.Lock
+      'lock'
     );
 
     this.props.onOk();

ts/components/session/ActionsPanel.tsx

@@ -96,19 +96,19 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
   let iconType: SessionIconType;
   switch (type) {
     case SectionType.Message:
-      iconType = SessionIconType.ChatBubble;
+      iconType = 'chatBubble';
       break;
     case SectionType.Contact:
-      iconType = SessionIconType.Users;
+      iconType = 'users';
       break;
     case SectionType.Settings:
-      iconType = SessionIconType.Gear;
+      iconType = 'gear';
       break;
     case SectionType.Moon:
-      iconType = SessionIconType.Moon;
+      iconType = 'moon';
       break;
     default:
-      iconType = SessionIconType.Moon;
+      iconType = 'moon';
   }
   const iconColor = undefined;
 

ts/components/session/LeftPaneMessageSection.tsx

@@ -14,7 +14,6 @@ import { SessionSearchInput } from './SessionSearchInput';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { RowRendererParamsType } from '../LeftPane';
 import { SessionClosableOverlay, SessionClosableOverlayType } from './SessionClosableOverlay';
-import { SessionIconType } from './icon';
 import { ContactType } from './SessionMemberListItem';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { PubKey } from '../../session/types';
@@ -133,7 +132,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     return (
       <LeftPaneSectionHeader
         label={window.i18n('messagesHeader')}
-        buttonIcon={SessionIconType.Plus}
+        buttonIcon="plus"
         buttonClicked={this.handleNewSessionButtonClick}
       />
     );

ts/components/session/LeftPaneSettingSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { SessionSettingCategory } from './settings/SessionSettings';
 import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 import { useDispatch, useSelector } from 'react-redux';
@@ -60,12 +60,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
 
       <div>
         {item.id === focusedSettingsSection && (
-          <SessionIcon
+          <SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} theme={theme} />
-            iconSize={'medium'}
-            iconType={SessionIconType.Chevron}
-            iconRotation={270}
-            theme={theme}
-          />
         )}
       </div>
     </div>

ts/components/session/SessionClosableOverlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { SessionIdEditable } from './SessionIdEditable';
 import { ContactType, SessionMemberListItem } from './SessionMemberListItem';
 import { ReduxConversationType } from '../../state/ducks/conversations';
@@ -146,11 +146,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     return (
       <div className="module-left-pane-overlay">
         <div className="exit">
-          <SessionIconButton
+          <SessionIconButton iconSize={'small'} iconType="exit" onClick={onCloseClick} />
-            iconSize={'small'}
-            iconType={SessionIconType.Exit}
-            onClick={onCloseClick}
-          />
         </div>
 
         <SpacerMD />

ts/components/session/SessionDropdown.tsx

@@ -37,7 +37,7 @@ export const SessionDropdown = (props: Props) => {
       >
         {label}
         <SessionIcon
-          iconType={SessionIconType.Chevron}
+          iconType="chevron"
           iconSize={'small'}
           iconRotation={chevronOrientation}
           theme={theme}

ts/components/session/SessionInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { DefaultTheme } from 'styled-components';
 
 interface Props {
@@ -109,7 +109,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
   private renderShowHideButton() {
     return (
       <SessionIconButton
-        iconType={SessionIconType.Eye}
+        iconType="eye"
         iconSize={'medium'}
         onClick={() => {
           this.setState({

ts/components/session/SessionMemberListItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Avatar, AvatarSize } from '../Avatar';
-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { Constants } from '../../session';
 import { useTheme } from 'styled-components';
 import { PubKey } from '../../session/types';
@@ -75,7 +75,7 @@ export const SessionMemberListItem = (props: Props) => {
       </div>
       <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
         <SessionIcon
-          iconType={SessionIconType.Check}
+          iconType="check"
           iconSize={'medium'}
           iconColor={Constants.UI.COLORS.GREEN}
           theme={theme}

ts/components/session/SessionPasswordPrompt.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { Constants } from '../../session';
 import { DefaultTheme, withTheme } from 'styled-components';
@@ -68,15 +68,10 @@ class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultThe
       />
     );
     const infoIcon = this.state.clearDataView ? (
-      <SessionIcon
+      <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" theme={this.props.theme} />
-        iconType={SessionIconType.Warning}
-        iconSize={35}
-        iconColor="#ce0000"
-        theme={this.props.theme}
-      />
     ) : (
       <SessionIcon
-        iconType={SessionIconType.Lock}
+        iconType="lock"
         iconSize={35}
         iconColor={Constants.UI.COLORS.GREEN}
         theme={this.props.theme}

ts/components/session/SessionRegistrationView.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { AccentText } from './AccentText';
 
 import { RegistrationStages } from './registration/RegistrationStages';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
 import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
 import { setSignInByLinking } from '../../session/utils/User';
@@ -20,7 +20,7 @@ export const SessionRegistrationView = () => {
           <div className="session-content-close-button">
             <SessionIconButton
               iconSize={'medium'}
-              iconType={SessionIconType.Exit}
+              iconType="exit"
               onClick={() => {
                 window.close();
               }}

ts/components/session/SessionScrollButton.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import styled, { ThemeContext } from 'styled-components';
 import { getShowScrollButton } from '../../state/selectors/conversations';
 
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 
 type Props = {
   onClick?: () => any;
@@ -24,7 +24,7 @@ export const SessionScrollButton = (props: Props) => {
   return (
     <SessionScrollButtonDiv theme={themeContext}>
       <SessionIconButton
-        iconType={SessionIconType.Chevron}
+        iconType="chevron"
         iconSize={'huge'}
         isHidden={!show}
         onClick={props.onClick}

ts/components/session/SessionSearchInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { getConversationsCount } from '../../state/selectors/conversations';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 
 type Props = {
   searchString: string;
@@ -21,7 +21,7 @@ export const SessionSearchInput = (props: Props) => {
 
   return (
     <div className="session-search-input">
-      <SessionIconButton iconSize={'medium'} iconType={SessionIconType.Search} />
+      <SessionIconButton iconSize={'medium'} iconType="search" />
       <input
         value={searchString}
         onChange={e => onChange(e.target.value)}

ts/components/session/SessionToast.tsx

@@ -57,19 +57,19 @@ export const SessionToast = (props: Props) => {
   if (!toastIcon) {
     switch (type) {
       case SessionToastType.Info:
-        toastIcon = SessionIconType.Info;
+        toastIcon = 'info';
         break;
       case SessionToastType.Success:
-        toastIcon = SessionIconType.Check;
+        toastIcon = 'check';
         break;
       case SessionToastType.Error:
-        toastIcon = SessionIconType.Error;
+        toastIcon = 'error';
         break;
       case SessionToastType.Warning:
-        toastIcon = SessionIconType.Warning;
+        toastIcon = 'warning';
         break;
       default:
-        toastIcon = SessionIconType.Info;
+        toastIcon = 'info';
     }
   }
 

ts/components/session/SessionWrapperModal.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 
-import { SessionIconButton, SessionIconType } from './icon/';
+import { SessionIconButton } from './icon/';
 import { SessionButton } from './SessionButton';
 import { useTheme } from 'styled-components';
 
@@ -85,7 +85,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
               <div className="session-modal__header__close">
                 {showExitIcon ? (
                   <SessionIconButton
-                    iconType={SessionIconType.Exit}
+                    iconType="exit"
                     iconSize={'small'}
                     onClick={props.onClose}
                     theme={theme}

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -4,7 +4,7 @@ import _, { debounce } from 'lodash';
 import { AttachmentType } from '../../../types/Attachment';
 import * as MIME from '../../../types/MIME';
 
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { SessionEmojiPanel } from './SessionEmojiPanel';
 import { SessionRecording } from './SessionRecording';
 
@@ -92,7 +92,7 @@ const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
   const theme = useTheme();
   return (
     <SessionIconButton
-      iconType={SessionIconType.PlusThin}
+      iconType="plusThin"
       backgroundColor={theme.colors.composeViewButtonBackground}
       iconSize={'huge2'}
       borderRadius="300px"
@@ -107,7 +107,7 @@ const StartRecordingButton = (props: { onClick: () => void }) => {
 
   return (
     <SessionIconButton
-      iconType={SessionIconType.Microphone}
+      iconType="microphone"
       iconSize={'huge2'}
       backgroundColor={theme.colors.composeViewButtonBackground}
       borderRadius="300px"
@@ -121,7 +121,7 @@ const ToggleEmojiButton = (props: { onClick: () => void }) => {
   const theme = useTheme();
   return (
     <SessionIconButton
-      iconType={SessionIconType.Emoji}
+      iconType="emoji"
       backgroundColor={theme.colors.composeViewButtonBackground}
       iconSize={'huge2'}
       borderRadius="300px"
@@ -136,7 +136,7 @@ const SendMessageButton = (props: { onClick: () => void }) => {
   return (
     <div className="send-message-button">
       <SessionIconButton
-        iconType={SessionIconType.Send}
+        iconType="send"
         backgroundColor={theme.colors.composeViewButtonBackground}
         iconSize={'huge2'}
         iconRotation={90}

ts/components/session/conversation/SessionFileDropzone.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 import { Flex } from '../../basic/Flex';
-import { SessionIcon, SessionIconType } from '../icon';
+import { SessionIcon } from '../icon';
 
 const DropZoneContainer = styled.div`
   display: inline-block;
@@ -31,11 +31,7 @@ export const SessionFileDropzone = () => {
     <DropZoneContainer>
       <DropZoneWithBorder>
         <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon
+          <SessionIcon iconSize={'max'} iconType="circlePlus" theme={themeContext} />
-            iconSize={'max'}
-            iconType={SessionIconType.CirclePlus}
-            theme={themeContext}
-          />
         </Flex>
       </DropZoneWithBorder>
     </DropZoneContainer>

ts/components/session/conversation/SessionMessagesList.tsx

@@ -19,7 +19,6 @@ export const SessionMessagesList = (props: {
   scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
 }) => {
   const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
-
   return (
     <>
       {messagesProps.map(messageProps => {

ts/components/session/conversation/SessionQuotedMessageComposition.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Flex } from '../../basic/Flex';
-import { SessionIcon, SessionIconButton, SessionIconType } from '../icon';
+import { SessionIcon, SessionIconButton } from '../icon';
 import styled, { useTheme } from 'styled-components';
 import { getAlt, isAudio } from '../../../types/Attachment';
 import { Image } from '../../conversation/Image';
@@ -77,7 +77,7 @@ export const SessionQuotedMessageComposition = () => {
       >
         <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
         <SessionIconButton
-          iconType={SessionIconType.Exit}
+          iconType="exit"
           iconSize={'small'}
           onClick={removeQuotedMessage}
           theme={theme}
@@ -98,7 +98,7 @@ export const SessionQuotedMessageComposition = () => {
           )}
 
           {hasAudioAttachment && (
-            <SessionIcon iconType={SessionIconType.Microphone} iconSize={'huge'} theme={theme} />
+            <SessionIcon iconType="microphone" iconSize="huge" theme={theme} />
           )}
         </Flex>
       </QuotedMessageCompositionReply>

ts/components/session/conversation/SessionRecording.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import moment from 'moment';
 
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { Constants } from '../../../session';
 import { ToastUtils } from '../../../session/utils';
 import autoBind from 'auto-bind';
@@ -129,38 +129,28 @@ class SessionRecordingInner extends React.Component<Props, State> {
           <StyledFlexWrapper marginHorizontal={Constants.UI.SPACING.marginXs}>
             {isRecording && (
               <SessionIconButton
-                iconType={SessionIconType.Pause}
+                iconType="pause"
                 iconSize={'medium'}
                 iconColor={Constants.UI.COLORS.DANGER_ALT}
                 onClick={actionPauseFn}
               />
             )}
             {actionPauseAudio && (
-              <SessionIconButton
+              <SessionIconButton iconType="pause" iconSize={'medium'} onClick={actionPauseFn} />
-                iconType={SessionIconType.Pause}
-                iconSize={'medium'}
-                onClick={actionPauseFn}
-              />
             )}
             {hasRecordingAndPaused && (
-              <SessionIconButton
+              <SessionIconButton iconType="play" iconSize={'medium'} onClick={this.playAudio} />
-                iconType={SessionIconType.Play}
-                iconSize={'medium'}
-                onClick={this.playAudio}
-              />
             )}
             {hasRecording && (
               <SessionIconButton
-                iconType={SessionIconType.Delete}
+                iconType="delete"
                 iconSize={'medium'}
                 onClick={this.onDeleteVoiceMessage}
               />
             )}
           </StyledFlexWrapper>
 
-          {actionDefault && (
+          {actionDefault && <SessionIconButton iconType="microphone" iconSize={'huge'} />}
-            <SessionIconButton iconType={SessionIconType.Microphone} iconSize={'huge'} />
-          )}
         </div>
 
         {hasRecording && !isRecording ? (
@@ -184,7 +174,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
             )}
           >
             <SessionIconButton
-              iconType={SessionIconType.Send}
+              iconType="send"
               iconSize={'large'}
               iconRotation={90}
               onClick={this.onSendVoiceMessage}

ts/components/session/conversation/SessionRightPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { Avatar, AvatarSize } from '../../Avatar';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionDropdown } from '../SessionDropdown';
@@ -135,7 +135,7 @@ const HeaderItem = () => {
   return (
     <div className="group-settings-header">
       <SessionIconButton
-        iconType={SessionIconType.Chevron}
+        iconType="chevron"
         iconSize={'medium'}
         iconRotation={270}
         onClick={() => {
@@ -153,8 +153,8 @@ const HeaderItem = () => {
       <div className="invite-friends-container">
         {showInviteContacts && (
           <SessionIconButton
-            iconType={SessionIconType.AddUser}
+            iconType="addUser"
-            iconSize={'medium'}
+            iconSize="medium"
             onClick={() => {
               if (selectedConversation) {
                 showInviteContactByConvoId(selectedConversation.id);

ts/components/session/settings/SessionSettings.tsx

@@ -20,7 +20,7 @@ import { unblockConvoById } from '../../../interactions/conversationInteractions
 import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
 import { PasswordAction } from '../../dialog/SessionPasswordDialog';
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { ToastUtils } from '../../../session/utils';
 
 export enum SessionSettingCategory {
@@ -250,11 +250,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
       <div className="session-settings__version-info">
         <span className="text-selectable">v{window.versionInfo.version}</span>
         <span>
-          <SessionIconButton
+          <SessionIconButton iconSize={'medium'} iconType="oxen" onClick={openOxenWebsite} />
-            iconSize={'medium'}
-            iconType={SessionIconType.Oxen}
-            onClick={openOxenWebsite}
-          />
         </span>
         <span className="text-selectable">{window.versionInfo.commitHash}</span>
       </div>

ts/session/utils/Toast.tsx

@@ -172,7 +172,7 @@ export function pushYouLeftTheGroup() {
 }
 
 export function pushDeleted() {
-  pushToastSuccess('deleted', window.i18n('deleted'), undefined, SessionIconType.Check);
+  pushToastSuccess('deleted', window.i18n('deleted'), undefined, 'check');
 }
 
 export function pushCannotRemoveCreatorFromGroup() {

ts/util/timer.ts

@@ -16,40 +16,40 @@ export function getIncrement(length: number): number {
 export function getTimerBucketIcon(expiration: number, length: number): SessionIconType {
   const delta = expiration - Date.now();
   if (delta < 0) {
-    return SessionIconType.Timer60;
+    return 'timer60';
   }
   if (delta > length) {
-    return SessionIconType.Timer00;
+    return 'timer00';
   }
   const bucket = Math.round((delta / length) * 12);
 
   const padded = padStart(String(bucket * 5), 2, '0');
   switch (padded) {
     case '00':
-      return SessionIconType.Timer00;
+      return 'timer00';
     case '05':
-      return SessionIconType.Timer05;
+      return 'timer05';
     case '10':
-      return SessionIconType.Timer10;
+      return 'timer10';
     case '15':
-      return SessionIconType.Timer15;
+      return 'timer15';
     case '20':
-      return SessionIconType.Timer20;
+      return 'timer20';
     case '25':
-      return SessionIconType.Timer25;
+      return 'timer25';
     case '30':
-      return SessionIconType.Timer30;
+      return 'timer30';
     case '35':
-      return SessionIconType.Timer35;
+      return 'timer35';
     case '40':
-      return SessionIconType.Timer40;
+      return 'timer40';
     case '45':
-      return SessionIconType.Timer45;
+      return 'timer45';
     case '50':
-      return SessionIconType.Timer50;
+      return 'timer50';
     case '55':
-      return SessionIconType.Timer55;
+      return 'timer55';
     default:
-      return SessionIconType.Timer60;
+      return 'timer60';
   }
 }