Replace themify icons

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -77,7 +77,7 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
             <td></td>
             <td className="text-center">
               <button className="btn btn-outline-secondary" type="button" onClick={props.onClickPlusBtn}>
-                <i className="ti ti-plus"></i>
+                <span className="material-symbols-outlined">add</span>
               </button>
             </td>
             <td></td>

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -94,7 +94,7 @@ export const PagePathNav: FC<Props> = (props: Props) => {
               <span className="badge rounded-pill text-bg-secondary ms-1 me-1">WIP</span>
             )}
             <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
-              <i className="ti ti-clipboard"></i>
+              <span className="material-symbols-outlined">content_paste</span>
             </CopyDropdown>
           </div>
         ) }

apps/app/src/components/Me/DisassociateModal.tsx

@@ -57,7 +57,7 @@ const DisassociateModal = (props: Props): JSX.Element => {
           { t('Cancel') }
         </button>
         <button type="button" className="btn btn-sm btn-danger" onClick={disassociateAccountHandler}>
-          <i className="ti ti-unlink"></i>
+          <span className="material-symbols-outlined">link_off</span>
           { t('Disassociate') }
         </button>
       </ModalFooter>

apps/app/src/components/Me/ExternalAccountRow.jsx

@@ -22,7 +22,7 @@ const ExternalAccountRow = (props) => {
           className="btn btn-sm btn-danger"
           onClick={() => props.openDisassociateModal(account)}
         >
-          <i className="ti ti-unlink"></i>
+          <span className="material-symbols-outlined">link_off</span>
           { t('Disassociate') }
         </button>
       </td>

apps/app/src/components/PageAlert/PageRedirectedAlert.tsx

@@ -45,7 +45,7 @@ export const PageRedirectedAlert = React.memo((): JSX.Element => {
         <strong>{ t('Redirected') }:</strong> { t('page_page.notice.redirected')} <code>{redirectFrom}</code> {t('page_page.notice.redirected_period')}
       </span>
       <button type="button" id="unlink-page-button" onClick={unlinkButtonClickHandler} className="btn btn-outline-dark btn-sm float-end">
-        <i className="ti ti-unlink" aria-hidden="true"></i>
+        <span className="material-symbols-outlined" aria-hidden="true">link_off</span>
         {t('unlink_redirection')}
       </button>
     </div>

apps/app/src/components/PageComment/CommentControl.tsx

@@ -22,7 +22,7 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
         className="btn btn-link p-2 me-2"
         onClick={onClickDeleteBtn}
       >
-        <i className="ti ti-close"></i>
+        <span className="material-symbols-outlined">close</span>
       </button>
     </div>
   );

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -475,13 +475,13 @@ export const HandsontableModal = (): JSX.Element => {
           </button>
           <div role="group" className="btn-group">
             <button type="button" className="btn btn-secondary" onClick={() => { alignButtonHandler('l') }}>
-              <i className="ti ti-align-left"></i>
+              <span className="material-symbols-outlined">format_align_left</span>
             </button>
             <button type="button" className="btn btn-secondary" onClick={() => { alignButtonHandler('c') }}>
-              <i className="ti ti-align-center"></i>
+              <span className="material-symbols-outlined">format_align_center</span>
             </button>
             <button type="button" className="btn btn-secondary" onClick={() => { alignButtonHandler('r') }}>
-              <i className="ti ti-align-right"></i>
+              <span className="material-symbols-outlined">format_align_right</span>
             </button>
           </div>
           <Collapse isOpen={isDataImportAreaExpanded}>

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -75,7 +75,7 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
             caret
             className="d-block text-muted bg-transparent btn-copy border-0 py-0"
           >
-            <i className="ti ti-clipboard"></i>
+            <span className="material-symbols-outlined">content_paste</span>
           </DropdownToggle>
           <DropdownMenu strategy="fixed" end>
             {/* Page path URL */}

packages/remark-lsx/src/client/components/LsxPageList/LsxPage.tsx

@@ -65,8 +65,8 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   const iconElement: JSX.Element = useMemo(() => {
     const isExists = pageId != null;
     return (isExists)
-      ? <i className="ti ti-agenda" aria-hidden="true"></i>
-      : <i className="ti ti-file lsx-page-not-exist" aria-hidden="true"></i>;
+      ? <span className="material-symbols-outlined" aria-hidden="true">description</span>
+      : <span className="material-symbols-outlined" aria-hidden="true">draft</span>;
   }, [pageId]);
 
   const pagePathElement: JSX.Element = useMemo(() => {