Use react-icons

client/js/components/TabList.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
 import get from 'lodash/get';
+import { FiPlus, FiUser, FiSettings } from 'react-icons/fi';
 import Button from 'components/ui/Button';
 import TabListItem from 'containers/TabListItem';
 import { count } from 'utils';
@@ -113,9 +114,9 @@ export default class TabList extends PureComponent {
       <div className={className}>
         <div className="tab-container">{tabs}</div>
         <div className="side-buttons">
-          <Button onClick={this.handleConnectClick}>+</Button>
-          <i className="icon-user" />
-          <i className="icon-cog" onClick={this.handleSettingsClick} />
+          <Button icon={FiPlus} onClick={this.handleConnectClick} />
+          <Button icon={FiUser} />
+          <Button icon={FiSettings} onClick={this.handleSettingsClick} />
         </div>
       </div>
     );

client/js/components/modals/AddChannel.js

@@ -1,5 +1,6 @@
 import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
 import get from 'lodash/get';
+import { FiUsers, FiX } from 'react-icons/fi';
 import withModal from 'components/modals/withModal';
 import Button from 'components/ui/Button';
 import { join } from 'state/channels';
@@ -16,10 +17,8 @@ const Channel = memo(({ server, name, topic, userCount, joined, ...props }) => {
         <h2 className="modal-channel-name" onClick={handleJoinClick}>
           {name}
         </h2>
-        <span className="modal-channel-users">
-          <i className="icon-user" />
-          {userCount}
-        </span>
+        <FiUsers />
+        <span className="modal-channel-users">{userCount}</span>
         {joined ? (
           <span style={{ color: '#6bb758' }}>Joined</span>
         ) : (
@@ -115,8 +114,9 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
           onKeyDown={handleKey}
           onChange={handleSearch}
         />
-        <i
-          className="icon-cancel modal-close modal-channel-close"
+        <Button
+          icon={FiX}
+          className="modal-close modal-channel-close"
           onClick={onClose}
         />
       </div>

client/js/components/modals/Topic.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { FiX } from 'react-icons/fi';
+import Button from 'components/ui/Button';
 import withModal from 'components/modals/withModal';
 import { linkify } from 'utils';
 
@@ -7,7 +9,7 @@ const Topic = ({ payload: { topic, channel }, onClose }) => {
     <>
       <div className="modal-header">
         <h2>Topic in {channel}</h2>
-        <i className="icon-cancel modal-close" onClick={onClose} />
+        <Button icon={FiX} className="modal-close" onClick={onClose} />
       </div>
       <p className="modal-content">{linkify(topic)}</p>
     </>

client/js/components/pages/Chat/ChatTitle.js

@@ -1,5 +1,7 @@
 import React, { memo } from 'react';
+import { FiUsers, FiSearch, FiX } from 'react-icons/fi';
 import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
 import Editable from 'components/ui/Editable';
 import { isValidServerName } from 'state/servers';
 import { isChannel } from 'utils';
@@ -60,19 +62,19 @@ const ChatTitle = ({
           )}
           {serverError}
         </div>
-        <i className="icon-search" title="Search" onClick={onToggleSearch} />
-        <i
-          className="icon-cancel button-leave"
-          title={closeTitle}
-          onClick={onCloseClick}
+        {tab.name && (
+          <Button icon={FiSearch} title="Search" onClick={onToggleSearch} />
+        )}
+        <Button icon={FiX} title={closeTitle} onClick={onCloseClick} />
+        <Button
+          icon={FiUsers}
+          className="button-userlist"
+          onClick={onToggleUserList}
         />
-        <i className="icon-user button-userlist" onClick={onToggleUserList} />
       </div>
       <div className="userlist-bar">
-        <i className="icon-user" />
-        <span className="chat-usercount">
-          {channel && channel.users.length}
-        </span>
+        <FiUsers />
+        {channel && channel.users.length}
       </div>
     </div>
   );

client/js/components/pages/Chat/Search.js

@@ -1,4 +1,5 @@
 import React, { memo, useRef, useEffect } from 'react';
+import { FiSearch } from 'react-icons/fi';
 import SearchResult from './SearchResult';
 
 const Search = ({ search, onSearch }) => {
@@ -22,7 +23,7 @@ const Search = ({ search, onSearch }) => {
   return (
     <div className="search" style={style}>
       <div className="search-input-wrap">
-        <i className="icon-search" />
+        <FiSearch className="search-input-icon" />
         <input
           ref={inputEl}
           className="search-input"

client/js/components/pages/Connect.js

@@ -7,6 +7,7 @@ import Checkbox from 'components/ui/formik/Checkbox';
 import TextInput from 'components/ui/TextInput';
 import Error from 'components/ui/formik/Error';
 import { isValidNick, isValidChannel, isValidUsername, isInt } from 'utils';
+import { FiMoreHorizontal } from 'react-icons/fi';
 
 const getSortedDefaultChannels = createSelector(
   defaults => defaults.channels,
@@ -118,7 +119,11 @@ class Connect extends Component {
           <TextInput name="nick" />
           <TextInput name="channels" transform={this.transformChannels} />
           {this.state.showOptionals && this.renderOptionals()}
-          <i className="icon-ellipsis" onClick={this.handleShowClick} />
+          <Button
+            className="connect-form-button-optionals"
+            icon={FiMoreHorizontal}
+            onClick={this.handleShowClick}
+          />
           <Button type="submit">Connect</Button>
         </Form>
       );

client/js/components/ui/Button.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import cn from 'classnames';
 
-const Button = ({ children, category, className, ...props }) => (
+const Button = ({ children, category, className, icon: Icon, ...props }) => (
   <button
-    className={cn(`button-${category}`, className)}
+    className={cn(
+      {
+        [`button-${category}`]: category,
+        'icon-button': Icon && !children
+      },
+      className
+    )}
     type="button"
     {...props}
   >
+    {Icon && <Icon />}
     {children}
   </button>
 );