Use react-icons

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"