Merge pull request #8575 from weseek/feat/139307-141243-Replacement-icon-left

feat: Replace icon font with Material Symbols Outlined

apps/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -49,12 +49,6 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
               defaultValue={adminCustomizeContainer.state.currentCustomizeCss || ''}
               onChange={(e) => { adminCustomizeContainer.changeCustomizeCss(e.target.value) }}
             />
-            {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <p className="form-text text-muted text-end">
-              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_settings.ctrl_space')}
-            </p>
-            */}
           </div>
 
           <AdminUpdateButtonRow onClick={onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -53,12 +53,6 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
               defaultValue={adminCustomizeContainer.state.currentCustomizeNoscript || ''}
               onChange={(e) => { adminCustomizeContainer.changeCustomizeNoscript(e.target.value) }}
             />
-            {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-end">
-              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
-              {t('admin:customize_settings.ctrl_space')}
-            </span>
-            */}
           </div>
 
           <a

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -50,12 +50,6 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
               defaultValue={adminCustomizeContainer.state.currentCustomizeScript || ''}
               onChange={(e) => { adminCustomizeContainer.changeCustomizeScript(e.target.value) }}
             />
-            {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-end">
-              <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
-              {t('admin:customize_settings.ctrl_space')}
-            </span>
-            */}
           </div>
 
           <a

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -7,9 +7,9 @@ import GrowiArchiveImportOption from '~/models/admin/growi-archive-import-option
 
 
 const MODE_ATTR_MAP = {
-  insert: { color: 'info', icon: 'icon-plus', label: 'Insert' },
-  upsert: { color: 'success', icon: 'icon-plus', label: 'Upsert' },
-  flushAndInsert: { color: 'danger', icon: 'icon-refresh', label: 'Flush and Insert' },
+  insert: { color: 'info', icon: 'add_circle', label: 'Insert' },
+  upsert: { color: 'success', icon: 'add_circle', label: 'Upsert' },
+  flushAndInsert: { color: 'danger', icon: 'autorenew', label: 'Flush and Insert' },
 };
 
 export const DEFAULT_MODE = 'insert';
@@ -72,7 +72,7 @@ export default class ImportCollectionItem extends React.Component {
   renderModeLabel(mode, isColorized = false) {
     const attrMap = MODE_ATTR_MAP[mode];
     const className = isColorized ? `text-${attrMap.color}` : '';
-    return <span className={`text-nowrap ${className}`}><i className={attrMap.icon}></i> {attrMap.label}</span>;
+    return <span className={`text-nowrap ${className}`}><span className="material-symbols-outlined">{attrMap.icon}</span> {attrMap.label}</span>;
   }
 
   renderCheckbox() {

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/Admin/Users/PasswordResetModal.jsx

@@ -126,7 +126,7 @@ class PasswordResetModal extends React.Component {
           </code>
           <CopyToClipboard text={temporaryPassword} onCopy={() => this.setState({ showTooltip: true })}>
             <button id="copy-tooltip" type="button" className="btn btn-outline-secondary border-0">
-              <i className="fa fa-clone" aria-hidden="true"></i>
+              <span className="material-symbols-outlined" aria-hidden="true">content_copy</span>
             </button>
           </CopyToClipboard>
           <Tooltip

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/InAppNotification/PageNotification/ModelNotification.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import type { HasObjectId } from '@growi/core';
 import { PagePathLabel } from '@growi/ui/dist/components';
@@ -26,7 +27,7 @@ export const ModelNotification: FC<Props> = (props) => {
         {actionMsg}
         <PagePathLabel path={notification.parsedSnapshot?.path ?? ''} />
       </div>
-      <i className={`${actionIcon} me-2`} />
+      <span className="material-symbols-outlined me-2">{actionIcon}</span>
       <FormattedDistanceDate
         id={notification._id}
         date={notification.createdAt}

apps/app/src/components/InAppNotification/PageNotification/useActionAndMsg.ts

@@ -16,59 +16,59 @@ export const useActionMsgAndIconForModelNotification = (notification: IInAppNoti
   switch (actionType) {
     case SupportedAction.ACTION_PAGE_LIKE:
       actionMsg = 'liked';
-      actionIcon = 'icon-like';
+      actionIcon = 'favorite';
       break;
     case SupportedAction.ACTION_PAGE_BOOKMARK:
       actionMsg = 'bookmarked on';
-      actionIcon = 'icon-star';
+      actionIcon = 'bookmark_add';
       break;
     case SupportedAction.ACTION_PAGE_UPDATE:
       actionMsg = 'updated on';
-      actionIcon = 'ti ti-agenda';
+      actionIcon = 'update';
       break;
     case SupportedAction.ACTION_PAGE_RENAME:
       actionMsg = 'renamed';
-      actionIcon = 'icon-action-redo';
+      actionIcon = 'redo';
       break;
     case SupportedAction.ACTION_PAGE_DUPLICATE:
       actionMsg = 'duplicated';
-      actionIcon = 'icon-docs';
+      actionIcon = 'file_copy';
       break;
     case SupportedAction.ACTION_PAGE_DELETE:
       actionMsg = 'deleted';
-      actionIcon = 'icon-trash';
+      actionIcon = 'delete';
       break;
     case SupportedAction.ACTION_PAGE_DELETE_COMPLETELY:
       actionMsg = 'completely deleted';
-      actionIcon = 'icon-fire';
+      actionIcon = 'delete_forever';
       break;
     case SupportedAction.ACTION_PAGE_REVERT:
       actionMsg = 'reverted';
-      actionIcon = 'icon-action-undo';
+      actionIcon = 'undo';
       break;
     case SupportedAction.ACTION_PAGE_RECURSIVELY_RENAME:
       actionMsg = 'renamed under';
-      actionIcon = 'icon-action-redo';
+      actionIcon = 'redo';
       break;
     case SupportedAction.ACTION_PAGE_RECURSIVELY_DELETE:
       actionMsg = 'deleted under';
-      actionIcon = 'icon-trash';
+      actionIcon = 'delete_forever';
       break;
     case SupportedAction.ACTION_PAGE_RECURSIVELY_DELETE_COMPLETELY:
       actionMsg = 'deleted completely under';
-      actionIcon = 'icon-fire';
+      actionIcon = 'delete_forever';
       break;
     case SupportedAction.ACTION_PAGE_RECURSIVELY_REVERT:
       actionMsg = 'reverted under';
-      actionIcon = 'icon-action-undo';
+      actionIcon = 'undo';
       break;
     case SupportedAction.ACTION_COMMENT_CREATE:
       actionMsg = 'commented on';
-      actionIcon = 'icon-bubble';
+      actionIcon = 'comment';
       break;
     case SupportedAction.ACTION_USER_REGISTRATION_APPROVAL_REQUEST:
       actionMsg = 'requested registration approval';
-      actionIcon = 'icon-bubble';
+      actionIcon = 'add_comment';
       break;
     default:
       actionMsg = '';

apps/app/src/components/InstallerForm.tsx

@@ -208,7 +208,7 @@ const InstallerForm = memo((): JSX.Element => {
                 {isLoading ? (
                   <LoadingSpinner />
                 ) : (
-                  <i className="icon-user-follow" />
+                  <span className="material-symbols-outlined">person_add</span>
                 )}
               </span>
               <span className="btn-label-text">{ t('Create') }</span>

apps/app/src/components/InvitedForm.tsx

@@ -147,7 +147,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
               {isLoading ? (
                 <LoadingSpinner />
               ) : (
-                <i className="icon-user-follow" />
+                <span className="material-symbols-outlined">person_add</span>
               )}
             </span>
             <span className="btn-label-text">{t('Create')}</span>

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/PageDeleteModal.tsx

@@ -1,5 +1,6 @@
+import type { FC } from 'react';
 import React, {
-  useState, FC, useMemo, useEffect,
+  useState, useMemo, useEffect,
 } from 'react';
 
 import type {
@@ -289,7 +290,7 @@ const PageDeleteModal: FC = () => {
           onClick={deleteButtonHandler}
           data-testid="delete-page-button"
         >
-          <i className={`me-1 icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
+          <span className="material-symbols-outlined me-1" aria-hidden="true">{deleteIconAndKey[deleteMode].icon}</span>
           { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
         </button>
       </>

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 */}

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-pagelist.cy.ts

@@ -31,7 +31,7 @@ context('Access to pagelist', () => {
   it('Page list modal is successfully opened ', () => {
     // Wait until the string "You cannot see this page" is no longer displayed
     cy.getByTestid('page-list-item-L').eq(0).within(() => {
-      cy.get('.icon-exclamation').should('not.exist');
+      cy.get('.material-symbols-outlined').contains('error').should('not.exist');
     });
 
     cy.waitUntilSpinnerDisappear();

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(() => {