Batch revert of style adjustment-related commits

apps/app/src/components/Admin/App/ConfirmModal.tsx

@@ -32,10 +32,8 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
   return (
     <Modal isOpen={props.isModalOpen} toggle={onCancel}>
       <ModalHeader tag="h4" toggle={onCancel} className="bg-danger">
-        <div className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-2">help</span>
-          {t('Warning')}
-        </div>
+        <span className="material-symbols-outlined">help</span>
+        {t('Warning')}
       </ModalHeader>
       <ModalBody>
         {props.warningMessage}
@@ -44,9 +42,9 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
             <>
               <br />
               <br />
-              <span className="text-warning d-flex">
+              <span className="text-warning">
                 <>
-                  <span className="material-symbols-outlined me-1">error</span>
+                  <span className="material-symbols-outlined">error</span>
                   {props.supplymentaryMessage}
                 </>
               </span>

apps/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -34,8 +34,8 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         {t('admin:app_setting.file_upload')}
         <br />
         <br />
-        <span className="text-danger d-flex">
-          <span className="material-symbols-outlined me-1">link_off</span>
+        <span className="text-danger">
+          <span className="material-symbols-outlined">link_off</span>
           {t('admin:app_setting.change_setting')}
         </span>
       </p>
@@ -65,10 +65,8 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         </div>
         {props.isFixedFileUploadByEnvVar && (
           <p className="alert alert-warning mt-2 text-start offset-3 col-6">
-            <div className="d-flex align-items-center">
-              <span className="material-symbols-outlined fs-5 me-1">help</span>
-              <b>FIXED</b><br />
-            </div>
+            <span className="material-symbols-outlined">help</span>
+            <b>FIXED</b><br />
             {/* eslint-disable-next-line react/no-danger */}
             <b dangerouslySetInnerHTML={{ __html: t('admin:app_setting.fixed_by_env_var', { fileUploadType: props.envFileUploadType }) }} />
           </p>

apps/app/src/components/Admin/App/MailSetting.tsx

@@ -47,9 +47,7 @@ const MailSetting = (props: Props) => {
   return (
     <React.Fragment>
       {!adminAppContainer.state.isMailerSetup && (
-        <div className="alert alert-danger d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">error</span> {t('admin:app_setting.mailer_is_not_set_up')}
-        </div>
+        <div className="alert alert-danger"><span className="material-symbols-outlined">error</span> {t('admin:app_setting.mailer_is_not_set_up')}</div>
       )}
       <div className="row mb-5">
         <label className="col-md-3 col-form-label text-end">{t('admin:app_setting.from_e-mail_address')}</label>

apps/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -58,8 +58,8 @@ export const MaintenanceMode: FC = () => {
         {t('admin:maintenance_mode.description')}
         <br />
         <br />
-        <span className="text-warning d-flex">
-          <span className="material-symbols-outlined me-1">error</span>
+        <span className="text-warning">
+          <span className="material-symbols-outlined">error</span>
           {t('admin:maintenance_mode.supplymentary_message_to_start')}
         </span>
       </p>

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -52,14 +52,10 @@ const QuestionnaireSettings = (): JSX.Element => {
       <p className="card custom-card">
         <div className="mb-4">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
-          <div className="mb-2 d-flex">
-            <span className="text-info d-flex me-2">
-              <span className="material-symbols-outlined me-1">info</span>{t('app_setting.about_data_sent')}
-            </span>
-            <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-flex">
-              {t('app_setting.learn_more')}
-              {/* TODO: 137284 */}
-              <span className="material-symbols-outlined">share</span>
+          <div className="mb-2">
+            <span className="text-info me-2"><span className="material-symbols-outlined">info</span>{t('app_setting.about_data_sent')}</span>
+            <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-inline">
+              {t('app_setting.learn_more')} <span className="material-symbols-outlined">share</span>
             </a>
           </div>
           {t('app_setting.other_info_will_be_sent')}<br />

apps/app/src/components/Admin/App/SiteUrlSetting.tsx

@@ -37,11 +37,7 @@ const SiteUrlSetting = (props: Props) => {
     <React.Fragment>
       <p className="card custom-card">{t('site_url.desc')}</p>
       {!adminAppContainer.state.isSetSiteUrl
-          && (
-            <p className="alert alert-danger d-flex">
-              <span className="material-symbols-outlined me-1">error</span> {t('site_url.warn')}
-            </p>
-          )}
+          && (<p className="alert alert-danger"><span className="material-symbols-outlined">error</span> {t('site_url.warn')}</p>)}
 
       { adminAppContainer.state.siteUrlUseOnlyEnvVars && (
         <div className="row">

apps/app/src/components/Admin/App/V5PageMigration.tsx

@@ -137,8 +137,8 @@ const V5PageMigration: FC<Props> = (props: Props) => {
         {t('admin:v5_page_migration.migration_desc')}
         <br />
         <br />
-        <span className="text-danger d-flex">
-          <span className="material-symbols-outlined me-1">error</span>
+        <span className="text-danger">
+          <span className="material-symbols-outlined">error</span>
           {t('admin:v5_page_migration.migration_note')}
         </span>
       </p>

apps/app/src/components/Admin/AuditLog/AuditLogDisableMode.tsx

@@ -11,7 +11,8 @@ export const AuditLogDisableMode: FC = () => {
         <div className="row justify-content-md-center">
           <div className="col-md-6 mt-5">
             <div className="text-center">
-              <h1><span className="material-symbols-outlined fs-1">error</span></h1>
+              {/* error icon large */}
+              <h1><span className="material-symbols-outlined">error</span></h1>
               <h1 className="text-center">{t('audit_log_management.audit_log')}</h1>
               <h3
                 // eslint-disable-next-line react/no-danger

apps/app/src/components/Admin/AuditLog/AuditLogSettings.tsx

@@ -24,10 +24,8 @@ export const AuditLogSettings: FC = () => {
         {t('admin:audit_log_management.activity_expiration_date_explain')}
       </p>
       <p className="alert alert-warning col-6">
-        <div className="d-flex">
-          <span className="material-symbols-outlined me-1">error</span>
-          <b>FIXED</b>
-        </div>
+        <span className="material-symbols-outlined">error</span>
+        <b>FIXED</b><br />
         <b
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{

apps/app/src/components/Admin/AuditLogManagement.tsx

@@ -149,11 +149,11 @@ export const AuditLogManagement: FC = () => {
 
   return (
     <div data-testid="admin-auditlog">
-      <button type="button" className="btn btn-outline-secondary mb-4 d-flex" onClick={() => setIsSettingPage(!isSettingPage)}>
+      <button type="button" className="btn btn-outline-secondary mb-4" onClick={() => setIsSettingPage(!isSettingPage)}>
         {
           isSettingPage
-            ? <><span className="material-symbols-outlined me-1">arrow_left_alt</span>{t('admin:audit_log_management.return')}</>
-            : <><span className="material-symbols-outlined me-1">settings</span>{t('admin:audit_log_management.settings')}</>
+            ? <><span className="material-symbols-outlined">arrow_left_alt</span>{t('admin:audit_log_management.return')}</>
+            : <><span className="material-symbols-outlined">settings</span>{t('admin:audit_log_management.settings')}</>
         }
       </button>
 

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -13,23 +13,23 @@ const MenuLabel = ({ menu }: { menu: string }) => {
 
   switch (menu) {
     /* eslint-disable no-multi-spaces, max-len */
-    case 'app':                      return <><span className="material-symbols-outlined me-1">settings</span>{        t('headers.app_settings', { ns: 'commons' }) }</>;
-    case 'security':                 return <><span className="material-symbols-outlined me-1">shield</span>{          t('security_settings.security_settings') }</>;
-    case 'markdown':                 return <><span className="material-symbols-outlined me-1">edit_document</span>{            t('markdown_settings.markdown_settings') }</>;
-    case 'customize':                return <><span className="material-symbols-outlined me-1">construction</span>{          t('customize_settings.customize_settings') }</>;
-    case 'importer':                 return <><span className="material-symbols-outlined me-1">cloud_upload</span>{    t('importer_management.import_data') }</>;
-    case 'export':                   return <><span className="material-symbols-outlined me-1">cloud_download</span>{  t('export_management.export_archive_data') }</>;
-    case 'data-transfer':            return <><span className="material-symbols-outlined me-1">flightsmode</span>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
-    case 'notification':             return <><span className="material-symbols-outlined me-1">notifications</span>{            t('external_notification.external_notification')}</>;
-    case 'slack-integration':        return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration.slack_integration') }</>;
-    case 'slack-integration-legacy': return <><span className="material-symbols-outlined me-1">shuffle</span>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
-    case 'users':                    return <><span className="material-symbols-outlined me-1">person</span>{            t('user_management.user_management') }</>;
-    case 'user-groups':              return <><span className="material-symbols-outlined me-1">group</span>{          t('user_group_management.user_group_management') }</>;
-    case 'audit-log':                return <><span className="material-symbols-outlined me-1">feed</span>{            t('audit_log_management.audit_log')}</>;
-    case 'plugins':                  return <><span className="material-symbols-outlined me-1">extension</span>{          t('plugins.plugins')}</>;
-    case 'search':                   return <><span className="material-symbols-outlined me-1">search</span>{       t('full_text_search_management.full_text_search_management') }</>;
-    case 'cloud':                    return <><span className="material-symbols-outlined me-1">share</span>{       t('cloud_setting_management.to_cloud_settings')} </>;
-    default:                         return <><span className="material-symbols-outlined me-1">home</span>{            t('wiki_management_homepage') }</>;
+    case 'app':                      return <><span className="material-symbols-outlined">settings</span>{        t('headers.app_settings', { ns: 'commons' }) }</>;
+    case 'security':                 return <><span className="material-symbols-outlined">shield</span>{          t('security_settings.security_settings') }</>;
+    case 'markdown':                 return <><span className="material-symbols-outlined">note</span>{            t('markdown_settings.markdown_settings') }</>;
+    case 'customize':                return <><span className="material-symbols-outlined">construction</span>{          t('customize_settings.customize_settings') }</>;
+    case 'importer':                 return <><span className="material-symbols-outlined">cloud_upload</span>{    t('importer_management.import_data') }</>;
+    case 'export':                   return <><span className="material-symbols-outlined">cloud_download</span>{  t('export_management.export_archive_data') }</>;
+    case 'data-transfer':            return <><span className="material-symbols-outlined">flight</span>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
+    case 'notification':             return <><span className="material-symbols-outlined">notifications</span>{            t('external_notification.external_notification')}</>;
+    case 'slack-integration':        return <><span className="material-symbols-outlined">shuffle</span>{         t('slack_integration.slack_integration') }</>;
+    case 'slack-integration-legacy': return <><span className="material-symbols-outlined">shuffle</span>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
+    case 'users':                    return <><span className="material-symbols-outlined">person</span>{            t('user_management.user_management') }</>;
+    case 'user-groups':              return <><span className="material-symbols-outlined">group</span>{          t('user_group_management.user_group_management') }</>;
+    case 'audit-log':                return <><span className="material-symbols-outlined">feed</span>{            t('audit_log_management.audit_log')}</>;
+    case 'plugins':                  return <><span className="material-symbols-outlined">extension</span>{          t('plugins.plugins')}</>;
+    case 'search':                   return <><span className="material-symbols-outlined">search</span>{       t('full_text_search_management.full_text_search_management') }</>;
+    case 'cloud':                    return <><span className="material-symbols-outlined">share</span>{       t('cloud_setting_management.to_cloud_settings')} </>;
+    default:                         return <><span className="material-symbols-outlined">home</span>{            t('wiki_management_homepage') }</>;
       /* eslint-enable no-multi-spaces, max-len */
   }
 };
@@ -46,7 +46,7 @@ const MenuLink = ({
 }: MenuLinkProps) => {
 
   const pageTransitionClassName = isListGroupItems
-    ? 'list-group-item list-group-item-action border-0 round-corner d-flex'
+    ? 'list-group-item list-group-item-action border-0 round-corner'
     : 'dropdown-item px-3 py-2';
 
   const href = isRoot ? '/admin' : urljoin('/admin', menu);

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -55,25 +55,18 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2 d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">sell</span> {aliasName}
+        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2">
+          <span className="material-symbols-outlined">sell</span> {aliasName}
         </span>
       );
     });
 
     return (
       <div className="card">
-        <div className="card-header d-flex">
-
-          <a
-            role="button"
-            className="text-nowrap me-2 d-flex align-items-center"
-            data-bs-toggle="collapse"
-            href={`#${collapseId}`}
-            aria-expanded="true"
-            aria-controls={collapseId}
-          >
-            <span className="material-symbols-outlined me-1">database</span> {indexName}
+        <div className="card-header">
+
+          <a role="button" className="text-nowrap me-2" data-bs-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+            <span className="material-symbols-outlined">database</span> {indexName}
           </a>
           <span className="ms-md-3">{aliasLabels}</span>
         </div>

apps/app/src/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx

@@ -14,19 +14,16 @@ const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element =>
 
   return (
     <div className="btn-group admin-user-menu dropdown">
-      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown">
-        <span className="material-symbols-outlined">settings</span>
-        <span className="caret"></span>
+      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+        <span className="material-symbols-outlined">settings</span> <span className="caret"></span>
       </button>
-      <ul className="dropdown-menu">
+      <ul className="dropdown-menu" role="menu">
         <li className="dropdown-header">{t('admin:export_management.export_menu')}</li>
-        <button type="button" className="dropdown-item d-flex align-items-center" onClick={() => { window.location.href = `/admin/export/${props.fileName}` }}>
-          <span className="material-symbols-outlined me-1">cloud_download</span> {t('admin:export_management.download')}
+        <button type="button" className="dropdown-item" onClick={() => { window.location.href = `/admin/export/${props.fileName}` }}>
+          <span className="material-symbols-outlined">cloud_download</span> {t('admin:export_management.download')}
         </button>
         <button type="button" className="dropdown-item" role="button" onClick={() => props.onZipFileStatRemove(props.fileName)}>
-          <span className="text-danger d-flex align-items-center">
-            <span className="material-symbols-outlined me-1">delete</span> {t('admin:export_management.delete')}
-          </span>
+          <span className="text-danger"><span className="material-symbols-outlined">delete</span> {t('admin:export_management.delete')}</span>
         </button>
       </ul>
     </div>

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

@@ -147,7 +147,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm p-1 ms-2 d-flex"
+        className="btn btn-outline-secondary btn-sm p-1 ms-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

apps/app/src/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -41,16 +41,12 @@ class ImportDataPageContents extends React.Component {
               <tbody>
                 <tr>
                   <th>{t('importer_management.article')}</th>
-                  <th className="d-flex">
-                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
-                  </th>
+                  <th><span className="material-symbols-outlined text-success">arrow_circle_right</span></th>
                   <th>{t('importer_management.page')}</th>
                 </tr>
                 <tr>
                   <th>{t('importer_management.category')}</th>
-                  <th className="d-flex">
-                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
-                  </th>
+                  <th><span className="material-symbols-outlined text-success">arrow_circle_right</span></th>
                   <th>{t('importer_management.page_path')}</th>
                 </tr>
                 <tr>
@@ -147,9 +143,7 @@ class ImportDataPageContents extends React.Component {
               <tbody>
                 <tr>
                   <th>{t('importer_management.article')}</th>
-                  <th className="d-flex">
-                    <span className="material-symbols-outlined text-success">arrow_circle_right</span>
-                  </th>
+                  <th><span className="material-symbols-outlined">arrow_circle_right</span></th>
                   <th>{t('importer_management.page')}</th>
                 </tr>
                 <tr>

apps/app/src/components/Admin/LegacySlackIntegration/LegacySlackIntegration.jsx

@@ -40,17 +40,16 @@ const LegacySlackIntegration = (props) => {
 
   return (
     <div data-testid="admin-slack-integration-legacy">
-      { true && (
-        <div className="alert alert-danger d-flex">
-          {/* <span className="material-symbols-outlined">remove</span> */}
-          <span className="material-symbols-outlined me-1">do_not_disturb_on</span>
+      { isDisabled && (
+        <div className="alert alert-danger">
+          <span className="material-symbols-outlined">remove</span>
           {/* eslint-disable-next-line react/no-danger */}
           <span dangerouslySetInnerHTML={{ __html: t('admin:slack_integration_legacy.alert_disabled') }}></span>
         </div>
       ) }
 
-      <div className="alert alert-warning d-flex">
-        <span className="material-symbols-outlined me-1">info</span>
+      <div className="alert alert-warning">
+        <span className="material-symbols-outlined">info</span>
         {/* eslint-disable-next-line react/no-danger */}
         <span dangerouslySetInnerHTML={{ __html: t('admin:slack_integration_legacy.alert_deplicated') }}></span>
       </div>

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -102,9 +102,7 @@ class SlackConfiguration extends React.Component {
               <h2 className="border-bottom mb-5">{t('notification_settings.slack_app_configuration')}</h2>
 
               <div className="card custom-card">
-                <span className="text-danger d-flex">
-                  <span className="material-symbols-outlined me-1">error</span>NOT RECOMMENDED
-                </span>
+                <span className="text-danger"><span className="material-symbols-outlined">error</span>NOT RECOMMENDED</span>
                 <br />
                 {/* eslint-disable-next-line react/no-danger */}
                 <span dangerouslySetInnerHTML={{ __html: t('notification_settings.slack_app_configuration_desc') }} />
@@ -142,7 +140,7 @@ class SlackConfiguration extends React.Component {
         <hr />
 
         <h3>
-          <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
+          <span className="material-symbols-outlined" aria-hidden="true">help</span>{' '}
           <a href="#collapseHelpForIwh" data-bs-toggle="collapse">{t('notification_settings.how_to.header')}</a>
         </h3>
 

apps/app/src/components/Admin/ManageExternalAccount.tsx

@@ -54,10 +54,8 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
           prefetch={false}
           className="btn btn-outline-secondary"
         >
-          <div className="d-flex">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">arrow_back</span>
-            {t('admin:user_management.back_to_user_management')}
-          </div>
+          <span className="material-symbols-outlined" aria-hidden="true">arrow_back</span>
+          {t('admin:user_management.back_to_user_management')}
         </Link>
       </p>
       <h2>{t('admin:user_management.external_account_list')}</h2>

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -98,44 +98,32 @@ class GlobalNotificationList extends React.Component {
                 <ul className="list-inline mb-0">
                   {notification.triggerEvents.includes('pageCreate') && (
                     <li className="list-inline-item badge rounded-pill bg-success">
-                      <div className="d-flex align-items-center">
-                        <span className=" material-symbols-outlined me-1">description</span>CREATE
-                      </div>
+                      <span className=" material-symbols-outlined">description</span> CREATE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageEdit') && (
                     <li className="list-inline-item badge rounded-pill bg-warning text-dark">
-                      <div className="d-flex align-items-center">
-                        <span className="material-symbols-outlined me-1">edit</span>EDIT
-                      </div>
+                      <span className="material-symbols-outlined">edit</span> EDIT
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageMove') && (
-                    <li className="list-inline-item badge rounded-pill bg-secondary">
-                      <div className="d-flex align-items-center">
-                        <span className="material-symbols-outlined me-1">redo</span>MOVE
-                      </div>
+                    <li className="list-inline-item badge rounded-pill bg-pink">
+                      <span className="material-symbols-outlined">redo</span> MOVE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageDelete') && (
                     <li className="list-inline-item badge rounded-pill bg-danger">
-                      <div className="d-flex align-items-center">
-                        <span className="material-symbols-outlined me-1">delete_forever</span>DELETE
-                      </div>
+                      <span className="material-symbols-outlined">delete_forever</span>DELETE
                     </li>
                   )}
                   {notification.triggerEvents.includes('pageLike') && (
                     <li className="list-inline-item badge rounded-pill bg-info">
-                      <div className="d-flex align-items-center">
-                        <span className="material-symbols-outlined me-1">favorite</span>LIKE
-                      </div>
+                      <span className="material-symbols-outlined">favorite</span> LIKE
                     </li>
                   )}
                   {notification.triggerEvents.includes('comment') && (
                     <li className="list-inline-item badge rounded-pill bg-primary">
-                      <div className="d-flex align-items-center">
-                        <span className="material-symbols-outlined me-1">bubble_chart</span>POST
-                      </div>
+                      <span className="material-symbols-outlined">bubble_chart</span> POST
                     </li>
                   )}
                 </ul>
@@ -148,26 +136,21 @@ class GlobalNotificationList extends React.Component {
               <td className="td-abs-center">
                 <div className="dropdown">
                   <button
-                    className="btn btn-outline-secondary dropdown-toggle d-flex align-items-center"
+                    className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
                     data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="false"
                   >
-                    <span className="material-symbols-outlined">settings</span>
-                    <span className="caret"></span>
+                    <span className="material-symbols-outlined">settings</span> <span className="caret"></span>
                   </button>
                   <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                     <a className="dropdown-item" href={urljoin('/admin/global-notification/', notification._id)}>
-                      <div className="d-flex">
-                        <span className="material-symbols-outlined me-1">note</span>{t('Edit')}
-                      </div>
+                      <span className="material-symbols-outlined">note</span> {t('Edit')}
                     </a>
                     <button className="dropdown-item" type="button" onClick={() => this.openConfirmationModal(notification)}>
-                      <div className="d-flex">
-                        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
-                      </div>
+                      <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
                     </button>
                   </div>
                 </div>

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -113,10 +113,8 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
     <>
       <div className="my-3">
         <Link href="/admin/notification" className="btn btn-outline-secondary">
-          <div className="d-flex me-1">
-            <span className="material-symbols-outlined" aria-hidden="true">arrow_left_alt</span>
-            {t('notification_settings.back_to_list')}
-          </div>
+          <span className="material-symbols-outlined" aria-hidden="true">arrow_left_alt</span>
+          {t('notification_settings.back_to_list')}
         </Link>
       </div>
 
@@ -181,9 +179,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
               <>
                 <div className="input-group notify-to-option" id="mail-input">
                   <div>
-                    <span className="input-group-text" id="mail-addon">
-                      <span className="material-symbols-outlined">mail</span>
-                    </span>
+                    <span className="input-group-text" id="mail-addon"></span><span className="material-symbols-outlined">mail</span>
                   </div>
                   <input
                     className="form-control"
@@ -202,7 +198,6 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                   {!isMailerSetup && <span className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />}
                   <b>Hint: </b>
                   <a href="https://ifttt.com/create" target="blank">{t('notification_settings.email.ifttt_link')}
-                    {/* TODO: 137284 */}
                     <span className="material-symbols-outlined">share</span>
                   </a>
                 </p>
@@ -212,9 +207,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
               <>
                 <div className="input-group notify-to-option" id="slack-input">
                   <div>
-                    <span className="input-group-text" id="slack-channel-addon">
-                      <span className="material-symbols-outlined">tag</span>
-                    </span>
+                    <span className="input-group-text" id="slack-channel-addon"></span><span className="material-symbols-outlined">tag</span>
                   </div>
                   <input
                     className="form-control"
@@ -245,9 +238,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.CREATE)}
               >
                 <span className="badge rounded-pill bg-success">
-                  <div className="d-flex align-items-center">
-                    <span className=" material-symbols-outlined me-1">description</span>CREATE
-                  </div>
+                  <span className="material-symbols-outlined">edit_note</span> CREATE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -259,9 +250,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.EDIT)}
               >
                 <span className="badge rounded-pill bg-warning text-dark">
-                  <div className="d-flex align-items-center">
-                    <span className="material-symbols-outlined me-1">edit</span>EDIT
-                  </div>
+                  <span className="imaterial-symbols-outlined">edit</span> EDIT
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -272,10 +261,8 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={triggerEvents.has(TriggerEventType.MOVE)}
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
-                <span className="badge rounded-pill bg-secondary">
-                  <div className="d-flex align-items-center">
-                    <span className="material-symbols-outlined me-1">redo</span>MOVE
-                  </div>
+                <span className="badge rounded-pill bg-pink">
+                  <span className="material-symbols-outlined">redo</span>MOVE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -287,9 +274,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
                 <span className="badge rounded-pill bg-danger">
-                  <div className="d-flex align-items-center">
-                    <span className="material-symbols-outlined me-1">delete_forever</span>DELETE
-                  </div>
+                  <span className="material-symbols-outlined">delete_forever</span>DELETE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -301,9 +286,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.LIKE)}
               >
                 <span className="badge rounded-pill bg-info">
-                  <div className="d-flex align-items-center">
-                    <span className="material-symbols-outlined me-1">favorite</span>LIKE
-                  </div>
+                  <span className="material-symbols-outlined">favorite</span>LIKE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -315,9 +298,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
                 <span className="badge rounded-pill bg-primary">
-                  <div className="d-flex align-items-center">
-                    <span className="material-symbols-outlined me-1">bubble_chart</span>POST
-                  </div>
+                  <span className="material-symbols-outlined">language</span>POST
                 </span>
               </TriggerEventCheckBox>
             </div>

apps/app/src/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -13,9 +13,7 @@ class NotificationDeleteModal extends React.PureComponent {
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
         <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger text-light">
-          <div className="d-flex align-items-center">
-            <span className="material-symbols-outlined me-1">delete_forever</span>Delete Global Notification Setting
-          </div>
+          <span className="material-symbols-outlined">delete_forever</span>Delete Global Notification Setting
         </ModalHeader>
         <ModalBody>
           <p>
@@ -26,8 +24,8 @@ class NotificationDeleteModal extends React.PureComponent {
           </p>
         </ModalBody>
         <ModalFooter>
-          <button type="button" className="btn btn-sm btn-danger d-flex align-items-center" onClick={this.props.onClickSubmit}>
-            <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
+          <button type="button" className="btn btn-sm btn-danger" onClick={this.props.onClickSubmit}>
+            <span className="material-symbols-outlined">delete_forever</span> {t('Delete')}
           </button>
         </ModalFooter>
       </Modal>

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -124,11 +124,11 @@ function NotificationSetting(props) {
   const navTabMapping = useMemo(() => {
     return {
       user_trigger_notification: {
-        Icon: () => <span className="material-symbols-outlined me-1">settings</span>,
+        Icon: () => <span className="material-symbols-outlined">settings</span>,
         i18n: 'User trigger notification',
       },
       global_notification: {
-        Icon: () => <span className="material-symbols-outlined me-1">settings</span>,
+        Icon: () => <span className="material-symbols-outlined">settings</span>,
         i18n: 'Global notification',
       },
     };

apps/app/src/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -15,10 +15,8 @@ const TriggerEventCheckBox = (props) => {
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="form-label form-check-label d-flex align-items-center" htmlFor={`trigger-event-${props.event}`}>
-        <div className="me-1">
-          {props.children}
-        </div>
+      <label className="form-label form-check-label" htmlFor={`trigger-event-${props.event}`}>
+        {props.children}{' '}
         {t(`notification_settings.event_${props.event}`)}
       </label>
     </div>

apps/app/src/components/Admin/Security/DeleteAllShareLinksModal.jsx

@@ -21,8 +21,8 @@ const DeleteAllShareLinksModal = React.memo((props) => {
   return (
     <Modal isOpen={props.isOpen} toggle={closeButtonHandler} className="page-comment-delete-modal">
       <ModalHeader tag="h4" toggle={closeButtonHandler} className="bg-danger text-light">
-        <span className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">delete_forever</span>
+        <span>
+          <span className="material-symbols-outlined">delete_forever</span>
           {t('security_settings.delete_all_share_links')}
         </span>
       </ModalHeader>
@@ -31,8 +31,9 @@ const DeleteAllShareLinksModal = React.memo((props) => {
       </ModalBody>
       <ModalFooter>
         <Button onClick={closeButtonHandler}>{t('Cancel')}</Button>
-        <Button color="danger" onClick={deleteAllLinkHandler} className="d-flex">
-          <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
+        <Button color="danger" onClick={deleteAllLinkHandler}>
+          <span className="material-symbols-outlined">delete_forever</span>
+          {t('Delete')}
         </Button>
       </ModalFooter>
     </Modal>

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -174,8 +174,8 @@ class GoogleSecurityManagementContents extends React.Component {
         <hr />
 
         <div style={{ minHeight: '300px' }}>
-          <h4 className="d-flex align-items-center">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
+          <h4>
+            <span className="material-symbols-outlined" aria-hidden="true">help</span>
             <a href="#collapseHelpForGoogleOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
           </h4>
           <ol id="collapseHelpForGoogleOauth" className="collapse">

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -448,8 +448,8 @@ class OidcSecurityManagementContents extends React.Component {
         <hr />
 
         <div style={{ minHeight: '300px' }}>
-          <h4 className="d-flex align-items-center">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">help</span>
+          <h4>
+            <span className="material-symbols-outlined" aria-hidden="true">help</span>
             <a href="#collapseHelpForOidcOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">

apps/app/src/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.jsx

@@ -23,16 +23,16 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
       <ModalHeader tag="h4" toggle={closeButtonHandler} className="bg-danger text-light">
         <span>
           {props.isResetAll && (
-            <div className="d-flex align-items-center">
-              <span className="material-symbols-outlined me-1">delete_forever</span>
+            <>
+              <span className="material-symbols-outlined">delete_forever</span>
               {t('admin:slack_integration.reset_all_settings')}
-            </div>
+            </>
           )}
           {!props.isResetAll && (
-            <div className="d-flex align-items-center">
-              <span className="material-symbols-outlined me-1">delete</span>
+            <>
+              <span className="material-symbols-outlined">delete</span>
               {t('admin:slack_integration.delete_slackbot_settings')}
-            </div>
+            </>
           )}
         </span>
       </ModalHeader>
@@ -54,16 +54,16 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
         <Button onClick={closeButtonHandler}>{t('Cancel')}</Button>
         <Button color="danger" onClick={deleteSlackCredentialsHandler}>
           {props.isResetAll && (
-            <div className="d-flex align-items-center">
+            <>
               <span className="material-symbols-outlined">delete_forever</span>
               {t('admin:slack_integration.reset')}
-            </div>
+            </>
           )}
           {!props.isResetAll && (
-            <div className="d-flex align-items-center">
+            <>
               <span className="material-symbols-outlined">delete</span>
               {t('admin:slack_integration.delete')}
-            </div>
+            </>
           )}
         </Button>
       </ModalFooter>

apps/app/src/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -38,7 +38,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
         </label>
       </div>
       <button
-        className="btn btn-outline-danger ms-3 d-flex"
+        className="btn btn-outline-danger ms-3"
         type="button"
         onClick={() => {
           if (onDeleteButtonClicked != null) {

apps/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -184,10 +184,7 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
   return (
     <Modal className="modal-md" isOpen={props.isShow} toggle={toggleHandler}>
       <ModalHeader tag="h4" toggle={toggleHandler} className="bg-danger text-light">
-        <div className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">delete_forever</span>
-          {t('admin:user_group_management.delete_modal.header')}
-        </div>
+        <span className="material-symbols-outlined">delete_forever</span> {t('admin:user_group_management.delete_modal.header')}
       </ModalHeader>
       <ModalBody>
         <div>
@@ -203,8 +200,8 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
             {renderPageActionSelector()}
             {renderGroupSelector()}
           </div>
-          <button type="submit" value="" className="btn btn-sm btn-danger text-nowrap d-flex align-items-center" disabled={!validateForm()}>
-            <span className="material-symbols-outlined">delete_forever</span>{t('Delete')}
+          <button type="submit" value="" className="btn btn-sm btn-danger text-nowrap" disabled={!validateForm()}>
+            <span className="material-symbols-outlined">delete_forever</span> {t('Delete')}
           </button>
         </form>
       </ModalFooter>

apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -209,35 +209,17 @@ export const UserGroupTable: FC<Props> = ({
                           <i className="icon-settings"></i>
                         </button>
                         <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${group._id}`}>
-                          <button
-                            className="dropdown-item d-flex align-items-center"
-                            type="button"
-                            role="button"
-                            onClick={onClickEdit}
-                            data-user-group-id={group._id}
-                          >
-                            <span className="material-symbols-outlined me-1">edit</span>{t('Edit')}
+                          <button className="dropdown-item" type="button" role="button" onClick={onClickEdit} data-user-group-id={group._id}>
+                            <i className="icon-fw icon-note"></i> {t('Edit')}
                           </button>
                           {onRemove != null
                           && (
-                            <button
-                              className="dropdown-item d-flex align-items-center"
-                              type="button"
-                              role="button"
-                              onClick={onClickRemove}
-                              data-user-group-id={group._id}
-                            >
-                              <span className="material-symbols-outlined me-1">link_off</span>{t('admin:user_group_management.remove_child_group')}
+                            <button className="dropdown-item" type="button" role="button" onClick={onClickRemove} data-user-group-id={group._id}>
+                              <i className="icon-fw fa fa-chain-broken"></i> {t('admin:user_group_management.remove_child_group')}
                             </button>
                           )}
-                          <button
-                            className="dropdown-item d-flex align-items-center"
-                            type="button"
-                            role="button"
-                            onClick={onClickDelete}
-                            data-user-group-id={group._id}
-                          >
-                            <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
+                          <button className="dropdown-item" type="button" role="button" onClick={onClickDelete} data-user-group-id={group._id}>
+                            <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
                           </button>
                         </div>
                       </div>

apps/app/src/components/Admin/UserManagement.tsx

@@ -128,10 +128,8 @@ const UserManagement = (props: UserManagementProps) => {
           className="btn btn-outline-secondary ms-2"
           role="button"
         >
-          <div className="d-flex">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">person_add</span>
-            {t('admin:user_management.external_account')}
-          </div>
+          <span className="material-symbols-outlined" aria-hidden="true">person_add</span>
+          {t('admin:user_management.external_account')}
         </Link>
       </p>
 
@@ -182,10 +180,10 @@ const UserManagement = (props: UserManagementProps) => {
           <div className="col-md-2 my-2">
             <button
               type="button"
-              className="btn btn-outline-secondary btn-sm d-flex align-items-center"
+              className="btn btn-outline-secondary btn-sm"
               onClick={resetButtonClickHandler}
             >
-              <span className="material-symbols-outlined fs-5">refresh</span>
+              <span className="material-symbols-outlined">refresh</span>
               {t('commons:Reset')}
             </button>
           </div>

apps/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -97,12 +97,12 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                     <ul className="dropdown-menu" role="menu">
                       <li className="dropdown-header">{t('user_management.user_table.edit_menu')}</li>
                       <button
-                        className="dropdown-item d-flex align-items-center"
+                        className="dropdown-item"
                         type="button"
                         role="button"
                         onClick={() => removeExtenalAccount(ea._id)}
                       >
-                        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
+                        <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
                       </button>
                     </ul>
                   </div>

apps/app/src/components/Admin/Users/SendInvitationEmailButton.jsx

@@ -37,8 +37,8 @@ const SendInvitationEmailButton = (props) => {
   };
 
   return (
-    <button className={`dropdown-item ${textColor} d-flex align-items-center`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
-      <span className="material-symbols-outlined me-1">mail</span>
+    <button className={`dropdown-item ${textColor}`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
+      <i className="icon-fw icon-envelope"></i>
       {isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
       {!isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
     </button>

apps/app/src/components/Admin/Users/UserMenu.tsx

@@ -47,8 +47,8 @@ const UserMenu = (props: UserMenuProps) => {
         <li className="dropdown-divider"></li>
         <li className="dropdown-header">{t('user_management.user_table.edit_menu')}</li>
         <li>
-          <button className="dropdown-item d-flex align-items-center" type="button" onClick={onClickPasswordResetHandler}>
-            <span className="material-symbols-outlined me-1">key</span>{ t('user_management.reset_password') }
+          <button className="dropdown-item" type="button" onClick={onClickPasswordResetHandler}>
+            <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
           </button>
         </li>
       </>

apps/app/src/components/Admin/Users/UserRemoveButton.jsx

@@ -33,8 +33,8 @@ class UserRemoveButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <button className="dropdown-item d-flex align-items-center" type="button" onClick={() => { this.onClickDeleteBtn() }}>
-        <span className="material-symbols-outlined text-danger me-1">delete_forever</span> {t('Delete')}
+      <button className="dropdown-item" type="button" onClick={() => { this.onClickDeleteBtn() }}>
+        <span className="material-symbols-outlined text-danger">delete_forever</span> {t('Delete')}
       </button>
     );
   }

apps/app/src/components/AlertSiteUrlUndefined.tsx

@@ -27,13 +27,11 @@ export const AlertSiteUrlUndefined = (): JSX.Element => {
   }
 
   return (
-    <div className="alert alert-danger rounded-0 d-edit-none mb-0 px-4 py-2 d-flex align-items-center">
-      <span className="material-symbols-outlined me-1">error</span>
-      {t('alert.siteUrl_is_not_set', { link: t('headers.app_settings') })}
-      &gt;&gt;
-      <a href="/admin/app" className="d-flex align-items-center">{t('headers.app_settings')}
-        <span className="material-symbols-outlined">login</span>
-      </a>
+    <div className="alert alert-danger rounded-0 d-edit-none mb-0 px-4 py-2">
+      <span className="material-symbols-outlined">error</span>
+      {
+        t('alert.siteUrl_is_not_set', { link: t('headers.app_settings') })
+      } &gt;&gt; <a href="/admin/app">{t('headers.app_settings')}<span className="material-symbols-outlined">login</span></a>
     </div>
   );
 };

apps/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -265,7 +265,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
                 }
               >
                 <div onClick={e => e.stopPropagation()}>
-                  <DropdownToggle color="transparent" className="border-0 rounded p-0 grw-visible-on-hover me-1">
+                  <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
                     <span className="material-symbols-outlined">more_vert</span>
                   </DropdownToggle>
                 </div>

apps/app/src/components/Bookmarks/BookmarkFolderItemControl.tsx

@@ -35,7 +35,7 @@ export const BookmarkFolderItemControl: React.FC<{
             onClick={onClickMoveToRoot}
             className="grw-page-control-dropdown-item"
           >
-            <span className="material-symbols-outlined me-1">bookmark</span>
+            <i className="fa fa-fw fa-bookmark-o grw-page-control-dropdown-icon"></i>
             {t('bookmark_folder.move_to_root')}
           </DropdownItem>
         )}
@@ -43,7 +43,7 @@ export const BookmarkFolderItemControl: React.FC<{
           onClick={onClickRename}
           className="grw-page-control-dropdown-item"
         >
-          <span className="material-symbols-outlined me-1">redo</span>
+          <i className="icon-fw icon-action-redo grw-page-control-dropdown-icon"></i>
           {t('Rename')}
         </DropdownItem>
 
@@ -53,7 +53,7 @@ export const BookmarkFolderItemControl: React.FC<{
           className="pt-2 grw-page-control-dropdown-item text-danger"
           onClick={onClickDelete}
         >
-          <span className="material-symbols-outlined me-1">delete</span>
+          <span className="material-symbols-outlined grw-page-control-dropdown-icon">delete</span>
           {t('Delete')}
         </DropdownItem>
       </DropdownMenu>

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

@@ -51,7 +51,7 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
         <RootElm>
           <span className="path-segment">
             <Link href="/" prefetch={false}>
-              <span className="material-symbols-outlined">home</span>
+              <i className="icon-home"></i>
               <span className={`separator ${styles.separator}`}>/</span>
             </Link>
           </span>
@@ -78,12 +78,11 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
           isInnerElem
         />
       ) }
-
       { isSeparatorRequired && (
         <span className={`separator ${styles.separator}`}>/</span>
       ) }
 
-      <Link href={href} prefetch={false} legacyBehavior className="">
+      <Link href={href} prefetch={false} legacyBehavior>
         {
           shouldDangerouslySetInnerHTML
             // eslint-disable-next-line react/no-danger

apps/app/src/components/CompleteUserRegistration.tsx

@@ -14,9 +14,7 @@ export const CompleteUserRegistration: FC = () => {
           </p>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
           <a href="/login">
-            <div className="d-flex align-items-center justify-content-center">
-              <span className="material-symbols-outlined me-1">login</span>{t('Sign in is here')}
-            </div>
+            <span className="material-symbols-outlined">login</span>{t('Sign in is here')}
           </a>
         </div>
       </div>

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -58,7 +58,6 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
   }, [username]);
 
   const handleSubmitRegistration = useCallback(async(e) => {
-    console.log('ok');
     e.preventDefault();
     setDisableForm(true);
     try {
@@ -112,16 +111,12 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               <input type="hidden" name="token" value={token} />
 
               <div className="input-group">
-                <span className="input-group-text">
-                  <span className="material-symbols-outlined">mail</span>
-                </span>
+                <span className="input-group-text"></span><span className="material-symbols-outlined">mail</span>
                 <input type="text" className="form-control" placeholder={t('Email')} disabled value={email} />
               </div>
 
               <div className="input-group" id="input-group-username">
-                <span className="input-group-text">
-                  <span className="material-symbols-outlined">person</span>
-                </span>
+                <span className="input-group-text"></span><span className="material-symbols-outlined">person</span>
                 <input
                   type="text"
                   className="form-control"
@@ -139,9 +134,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               )}
 
               <div className="input-group">
-                <span className="input-group-text">
-                  <span className="material-symbols-outlined">sell</span>
-                </span>
+                <span className="input-group-text"></span><span className="material-symbols-outlined">sell</span>
                 <input
                   type="text"
                   className="form-control"
@@ -155,9 +148,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </div>
 
               <div className="input-group">
-                <span className="input-group-text">
-                  <span className="material-symbols-outlined">lock</span>
-                </span>
+                <span className="input-group-text"></span><span className="material-symbols-outlined">lock</span>
                 <input
                   type="password"
                   className="form-control"
@@ -171,19 +162,10 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </div>
 
               <div className="input-group justify-content-center d-flex mt-5">
-                <button type="submit" disabled={forceDisableForm || disableForm} className="btn btn-fill" id="register">
+                <button type="button" disabled={forceDisableForm || disableForm} className="btn btn-fill" id="register">
                   <div className="eff"></div>
-                  <span className="btn-label d-flex align-items-center">
-                    <span className="material-symbols-outlined">person</span>
-                  </span>
-                  <span className="btn-label-text">{ t('Create') }</span>
-                  {/* <div className="eff"></div>
-                  <span className="btn-label d-flex align-items-center">
-                    <span className="btn-label">
-                      <span className="material-symbols-outlined">person_add</span>
-                    </span>
-                    <span className="btn-label-text">{t('Create')}</span>
-                  </span> */}
+                  <span className="btn-label"></span><span className="material-symbols-outlined">person_add</span>
+                  <span className="btn-label-text">{t('Create')}</span>
                 </button>
               </div>
 

apps/app/src/components/ContentLinkButtons.tsx

@@ -13,9 +13,9 @@ const BookMarkLinkButton = React.memo(() => {
     <ScrollLink to="bookmarks-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm d-flex align-items-center me-2"
+        className="btn btn-outline-secondary btn-sm px-2"
       >
-        <span className="material-symbols-outlined me-1">bookmark</span>
+        <span className="material-symbols-outlined">bookmark</span>
         <span>Bookmarks</span>
       </button>
     </ScrollLink>
@@ -30,10 +30,10 @@ const RecentlyCreatedLinkButton = React.memo(() => {
     <ScrollLink to="recently-created-list" offset={-120}>
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm d-flex align-items-center"
+        className="btn btn-outline-secondary btn-sm px-3"
       >
-        <span className="material-symbols-outlined me-1">edit</span>
-        <span className="text-nowrap">Recently Created</span>
+        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created me-2`}><RecentlyCreatedIcon /></i>
+        <span>Recently Created</span>
       </button>
     </ScrollLink>
   );

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -182,14 +182,7 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
                 key={key}
                 className={`p-0 ${isActive ? 'active' : inactiveClassnames.join(' ')}`}
               >
-                <NavLink
-                  type="button"
-                  key={key}
-                  innerRef={elm => registerNavLink(key, elm)}
-                  disabled={!isLinkEnabled}
-                  onClick={() => navLinkClickHandler(key)}
-                  className="d-flex align-items-center"
-                >
+                <NavLink type="button" key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
                   { Icon != null && <Icon /> } {i18n}
                 </NavLink>
               </NavItem>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -42,10 +42,8 @@ const DeleteBookmarkFolderModal: FC = () => {
   return (
     <Modal size="md" isOpen={isOpened} toggle={closeBookmarkFolderDeleteModal} data-testid="page-delete-modal" className="grw-create-page">
       <ModalHeader tag="h4" toggle={closeBookmarkFolderDeleteModal} className="bg-danger text-light">
-        <div className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">delete</span>
-          {t('bookmark_folder.delete_modal.modal_header_label')}
-        </div>
+        <span className="material-symbols-outlined">delete</span>
+        {t('bookmark_folder.delete_modal.modal_header_label')}
       </ModalHeader>
       <ModalBody>
         <div className="pb-1">
@@ -57,7 +55,7 @@ const DeleteBookmarkFolderModal: FC = () => {
       <ModalFooter>
         <button
           type="button"
-          className="btn btn-danger d-flex align-items-center"
+          className="btn btn-danger"
           onClick={onClickDeleteButton}
         >
           <span className="material-symbols-outlined" aria-hidden="true">delete</span>

apps/app/src/components/EmptyTrashButton.tsx

@@ -24,7 +24,7 @@ const EmptyTrashButton = (props: EmptyTrashButtonProps): JSX.Element => {
         disabled={disableEmptyButton}
         onClick={emptyTrashButtonHandler}
       >
-        <span className="material-symbols-outlined me-1">delete</span>
+        <span className="material-symbols-outlined">delete</span>
         <div>{t('modal_empty.empty_the_trash')}</div>
       </button>
     </div>

apps/app/src/components/EmptyTrashModal.tsx

@@ -61,10 +61,8 @@ const EmptyTrashModal: FC = () => {
   return (
     <Modal size="lg" isOpen={isOpened} toggle={closeEmptyTrashModal} data-testid="page-delete-modal">
       <ModalHeader tag="h4" toggle={closeEmptyTrashModal} className="bg-danger text-light">
-        <div className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">delete_forever</span>
-          {t('modal_empty.empty_the_trash')}
-        </div>
+        <span className="material-symbols-outlined">delete_forever</span>
+        {t('modal_empty.empty_the_trash')}
       </ModalHeader>
       <ModalBody>
         <div className="grw-scrollable-modal-body pb-1">
@@ -79,7 +77,7 @@ const EmptyTrashModal: FC = () => {
         <ApiErrorMessageList errs={errs} />
         <button
           type="button"
-          className="btn btn-danger d-flex align-items-center"
+          className="btn btn-danger"
           onClick={emptyTrashButtonHandler}
         >
           <span className="material-symbols-outlined" aria-hidden="true">delete_forever</span>

apps/app/src/components/ForbiddenPage.tsx

@@ -14,7 +14,7 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
       <div className="row not-found-message-row mb-4">
         <div className="col-lg-12">
           <h2 className="text-muted">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">block</span>
+            <span className="material-symbols-outlined" aria-hidden="true">block</span>
             Forbidden
           </h2>
         </div>
@@ -22,8 +22,8 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
 
       <div className="row row-alerts d-edit-none">
         <div className="col-sm-12">
-          <p className="alert alert-primary py-3 px-4 d-flex align-items-center">
-            <span className="material-symbols-outlined me-1" aria-hidden="true">lock</span>
+          <p className="alert alert-primary py-3 px-4">
+            <span className="material-symbols-outlined" aria-hidden="true">lock</span>
             { props.isLinkSharingDisabled ? t('share_links.link_sharing_is_disabled') : t('Browsing of this page is restricted')}
           </p>
         </div>

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -84,9 +84,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
   return (
     <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="end">
       <DropdownToggle className="px-3" color="primary" innerRef={buttonRef}>
-        <div className="d-flex align-items-center justify-content-center">
-          <span className="material-symbols-outlined">notifications</span> {badge}
-        </div>
+        <span className="material-symbols-outlined">notifications</span> {badge}
       </DropdownToggle>
       <DropdownMenu end>
         { inAppNotificationData != null && inAppNotificationData.docs.length === 0

apps/app/src/components/InstallerForm.tsx

@@ -100,9 +100,7 @@ const InstallerForm = memo((): JSX.Element => {
         <form role="form" id="register-form" className="col-md-12" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group dropdown-with-icon">
-              <span className="input-group-text">
-                <span className="material-symbols-outlined">language</span>
-              </span>
+              <span className="input-group-text"></span><span className="material-symbols-outlined">language</span>
               <button
                 type="button"
                 className="btn btn-secondary dropdown-toggle form-control text-end rounded-end"
@@ -147,9 +145,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className={`input-group mb-3${hasErrorClass}`}>
-            <span className="input-group-text">
-              <span className="material-symbols-outlined">person</span>
-            </span>
+            <span className="input-group-text"></span><span className="material-symbols-outlined">person</span>
             <input
               data-testid="tiUsername"
               type="text"
@@ -163,9 +159,7 @@ const InstallerForm = memo((): JSX.Element => {
           <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
-            <span className="input-group-text">
-              <span className="material-symbols-outlined">sell</span>
-            </span>
+            <span className="input-group-text"></span><span className="material-symbols-outlined">sell</span>
             <input
               data-testid="tiName"
               type="text"
@@ -177,9 +171,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="input-group-text">
-              <span className="material-symbols-outlined">mail</span>
-            </span>
+            <span className="input-group-text"></span><span className="material-symbols-outlined">mail</span>
             <input
               data-testid="tiEmail"
               type="email"
@@ -191,9 +183,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <span className="input-group-text">
-              <span className="material-symbols-outlined">lock</span>
-            </span>
+            <span className="input-group-text"></span> <span className="material-symbols-outlined">lock</span>
             <input
               data-testid="tiPassword"
               type="password"
@@ -213,9 +203,7 @@ const InstallerForm = memo((): JSX.Element => {
               disabled={isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label d-flex align-items-center">
-                <span className="material-symbols-outlined">{ isLoading ? 'sync' : 'person'}</span>
-              </span>
+              <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
               <span className="btn-label-text">{ t('Create') }</span>
             </button>
           </div>

apps/app/src/components/InvitedForm.tsx

@@ -141,9 +141,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         <div className="input-group justify-content-center d-flex mt-4">
           <button type="submit" className="btn btn-fill" id="register" disabled={isLoading}>
             <div className="eff"></div>
-            <span className="btn-label d-flex align-items-center">
-              <span className="material-symbols-outlined">{isLoading ? 'sync' : 'person'}</span>
-            </span>
+            <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
             <span className="btn-label-text">{t('Create')}</span>
           </button>
         </div>

apps/app/src/components/LoginForm.tsx

@@ -237,9 +237,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               disabled={isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label d-flex align-items-center">
+              <span className="btn-label">
                 {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'sync' : 'login'}</span>
+                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
               </span>
               <span className="btn-label-text">{t('Sign in')}</span>
             </button>
@@ -512,9 +512,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               disabled={(!isMailerSetup && isEmailAuthenticationEnabled) || isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label d-flex align-items-center">
+              <span className="btn-label">
                 {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'sync' : 'login'}</span>
+                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
               </span>
               <span className="btn-label-text">{submitText}</span>
             </button>
@@ -528,7 +528,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             <a
               href="#login"
               id="login"
-              className="link-switch d-flex align-items-center pull-right"
+              className="link-switch"
               style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
               onClick={switchForm}
             >
@@ -557,9 +557,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
                 {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
                 {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
-                  <div className="text-end">
-                    <a href="/forgot-password" className="d-block link-switch d-flex align-items-center pull-right mb-2">
-                      <span className="material-symbols-outlined">key</span>{t('forgot_password.forgot_password')}
+                  <div className="text-end mb-2">
+                    <a href="/forgot-password" className="d-block link-switch">
+                      <span className="material-symbols-outlined">vpn_key</span>{t('forgot_password.forgot_password')}
                     </a>
                   </div>
                 )}
@@ -569,7 +569,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                     <a
                       href="#register"
                       id="register"
-                      className="link-switch d-flex align-items-center pull-right mb-2"
+                      className="link-switch"
                       style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
                       onClick={switchForm}
                     >

apps/app/src/components/NotCreatablePage.tsx

@@ -9,7 +9,7 @@ export const NotCreatablePage: FC = () => {
     <div className="row not-found-message-row">
       <div className="col-md-12">
         <h2 className="text-muted">
-          <span className="material-symbols-outlined me-1" aria-hidden="true">block</span>
+          <span className="material-symbols-outlined" aria-hidden="true">block</span>
           { t('not_creatable_page.message') }
         </h2>
       </div>

apps/app/src/components/PageAccessoriesModal/ShareLink/ShareLinkList.tsx

@@ -52,8 +52,8 @@ const ShareLinkTr = (props: ShareLinkTrProps): JSX.Element => {
       <td style={{ verticalAlign: 'middle' }}>
         {shareLink.expiredAt && <span>{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}
       </td>
-      <td style={{ maxWidth: '25px', textAlign: 'center' }}>
-        <button className="btn btn-outline-warning d-flex align-items-center" type="button" onClick={onDelete}>
+      <td style={{ maxWidth: '0', textAlign: 'center' }}>
+        <button className="btn btn-outline-warning" type="button" onClick={onDelete}>
           <span className="material-symbols-outlined">delete</span>{t('Delete')}
         </button>
       </td>

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

@@ -86,16 +86,16 @@ export const TrashPageAlert = (): JSX.Element => {
       <>
         <button
           type="button"
-          className="btn btn-info rounded-pill btn-sm ms-auto me-2 d-flex align-items-center"
+          className="btn btn-info rounded-pill btn-sm ms-auto me-2"
           onClick={openPutbackPageModalHandler}
           data-bs-toggle="modal"
           data-testid="put-back-button"
         >
-          <span className="material-symbols-outlined">undo</span>{t('Put Back')}
+          <i className="icon-action-undo" aria-hidden="true"></i> {t('Put Back')}
         </button>
         <button
           type="button"
-          className="btn btn-danger rounded-pill btn-sm d-flex align-items-center"
+          className="btn btn-danger rounded-pill btn-sm"
           disabled={!(pageInfo?.isAbleToDeleteCompletely ?? false)}
           onClick={openPageDeleteModalHandler}
         >
@@ -114,9 +114,8 @@ export const TrashPageAlert = (): JSX.Element => {
     <>
       <div className="alert alert-warning py-3 ps-4 d-flex flex-column flex-lg-row" data-testid="trash-page-alert">
         <div className="flex-grow-1">
-          <div className="d-flex align-items-center">
-            This page is in the trash <span className="material-symbols-outlined" aria-hidden="true">delete</span>.
-          </div>
+          This page is in the trash <span className="material-symbols-outlined" aria-hidden="true">delete</span>.
+          <br />
           <UserPicture user={deleteUser} />
           <span className="ms-2">
             Deleted by {deleteUser?.name} at <span data-vrt-blackout-datetime>{deletedAt ?? pageData?.updatedAt}</span>

apps/app/src/components/PageComment.tsx

@@ -175,10 +175,10 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                           outline
                           color="secondary"
                           size="sm"
-                          className="btn-comment-reply d-flex align-items-center"
+                          className="btn-comment-reply"
                           onClick={() => onReplyButtonClickHandler(comment._id)}
                         >
-                          <span className="material-symbols-outlined fs-5 me-1">reply</span> Reply
+                          <span className="material-symbols-outlined">replay</span> Reply
                         </Button>
                       </NotAvailableForReadOnlyUser>
                     </NotAvailableForGuest>

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

@@ -31,8 +31,8 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
       return <></>;
     }
     return (
-      <span className="d-flex align-items-center">
-        <span className="material-symbols-outlined me-1">delete_forever</span>
+      <span>
+        <span className="material-symbols-outlined">delete_forever</span>
         Delete comment?
       </span>
     );
@@ -72,7 +72,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
       <>
         <span className="text-danger">{errorMessage}</span>&nbsp;
         <Button onClick={cancelToDelete}>Cancel</Button>
-        <Button color="danger" onClick={confirmToDelete} className="d-flex align-items-center">
+        <Button color="danger" onClick={confirmToDelete}>
           <span className="material-symbols-outlined">delete_forever</span>
           Delete
         </Button>

apps/app/src/components/PageCreateModal.jsx

@@ -194,9 +194,7 @@ const PageCreateModal = () => {
                 className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ms-3"
                 onClick={createTodayPage}
               >
-                <div className="d-flex align-items-center">
-                  <span className="material-symbols-outlined me-1">description</span>{t('Create')}
-                </div>
+                <span className="material-symbols-outlined">description</span>{t('Create')}
               </button>
             </div>
 
@@ -250,9 +248,7 @@ const PageCreateModal = () => {
                 onClick={createInputPage}
                 disabled={isMatchedWithUserHomepagePath}
               >
-                <div className="d-flex align-items-center">
-                  <span className="material-symbols-outlined me-1">description</span>{t('Create')}
-                </div>
+                <span className="material-symbols-outlined">description</span>{t('Create')}
               </button>
             </div>
 
@@ -307,9 +303,7 @@ const PageCreateModal = () => {
                 onClick={createTemplatePage}
                 disabled={template == null}
               >
-                <div className="d-flex align-items-center">
-                  <span className="material-symbols-outlined me-1">description</span>{t('Edit')}
-                </div>
+                <span className="material-symbols-outlined">description</span>{t('Edit')}
               </button>
             </div>
 

apps/app/src/components/PageDeleteModal.tsx

@@ -217,8 +217,8 @@ const PageDeleteModal: FC = () => {
         </label>
         {!isAbleToDeleteCompletely
         && (
-          <p className="alert alert-warning p-2 my-0 d-flex align-items-center">
-            <span className="material-symbols-outlined me-1 fs-5">block</span>{ t('modal_delete.delete_completely_restriction') }
+          <p className="alert alert-warning p-2 my-0">
+            <span className="material-symbols-outlined">block</span>{ t('modal_delete.delete_completely_restriction') }
           </p>
         )}
       </div>

apps/app/src/components/PageStatusAlert.tsx

@@ -75,17 +75,15 @@ export const PageStatusAlert = (): JSX.Element => {
     return {
       additionalClasses: ['bg-warning text-dark'],
       label:
-  <div className="d-flex">
-    <span className="material-symbols-outlined me-1">lightbulb</span>
+  <>
+    <span className="material-symbols-outlined">lightbulb</span>
     {label1}
-  </div>,
+  </>,
       btn:
   <>
-    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white">
-      <div className="d-flex">
-        <span className="material-symbols-outlined me-1">refresh</span>
-        {t('Load latest')}
-      </div>
+    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white me-4">
+      <span className="material-symbols-outlined">refresh</span>
+      {t('Load latest')}
     </button>
     { isConflict && (
       <button
@@ -93,10 +91,8 @@ export const PageStatusAlert = (): JSX.Element => {
         onClick={onClickResolveConflict}
         className="btn btn-outline-white"
       >
-        <div className="d-flex">
-          <span className="material-symbols-outlined me-1">description</span>
-          {t('modal_resolve_conflict.resolve_conflict')}
-        </div>
+        <span className="material-symbols-outlined">description</span>
+        {t('modal_resolve_conflict.resolve_conflict')}
       </button>
     )}
   </>,
@@ -109,7 +105,6 @@ export const PageStatusAlert = (): JSX.Element => {
     // 'revision?._id' and 'remoteRevisionId' are can not be undefined
     if (revision?._id == null || remoteRevisionId == null) { return }
 
-
     // when remote revision is newer than both
     if (isRevisionOutdated) {
       return getContentsForUpdatedAlert();

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -81,10 +81,7 @@ const PasswordResetExecutionForm: FC = () => {
         <input name="reset-password-btn" className="btn btn-lg btn-primary" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
-        <div className="d-flex align-items-center justify-content-center mt-3">
-          <span className="material-symbols-outlined">login</span>
-          {t('forgot_password.sign_in_instead')}
-        </div>
+        <span className="material-symbols-outlined">login</span>{t('forgot_password.sign_in_instead')}
       </Link>
     </form>
   );

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -40,7 +40,8 @@ const PasswordResetRequestForm: FC = () => {
         </div>
       ) : (
         <>
-          <h1><span className="material-symbols-outlined fs-1">lock</span></h1>
+          {/* lock-icon large */}
+          <h1><span className="material-symbols-outlined">lock</span></h1>
           <h1 className="text-center">{ t('forgot_password.forgot_password') }</h1>
           <h3>{t('forgot_password.password_reset_request_desc')}</h3>
           <div>
@@ -67,10 +68,7 @@ const PasswordResetRequestForm: FC = () => {
         </>
       )}
       <Link href="/login" prefetch={false}>
-        <div className="d-flex align-items-center justify-content-center mt-3">
-          <span className="material-symbols-outlined">login</span>
-          {t('forgot_password.return_to_login')}
-        </div>
+        <span className="material-symbols-outlined">login</span>{t('forgot_password.return_to_login')}
       </Link>
     </form>
   );

apps/app/src/components/PrivateLegacyPages.tsx

@@ -171,11 +171,11 @@ const ConvertByPathModal = React.memo((props: ConvertByPathModalProps): JSX.Elem
         </div>
         <button
           type="button"
-          className="btn btn-primary d-flex align-items-center"
+          className="btn btn-primary"
           disabled={!checked}
           onClick={() => props.onSubmit?.(currentInput)}
         >
-          <span className="material-symbols-outlined me-1" aria-hidden="true">refresh</span>
+          <span className="material-symbols-outlined" aria-hidden="true">refresh</span>
           { t('private_legacy_pages.by_path_modal.button_label') }
         </button>
       </ModalFooter>
@@ -362,13 +362,13 @@ const PrivateLegacyPages = (): JSX.Element => {
                 {t('private_legacy_pages.bulk_operation')}
               </DropdownToggle>
               <DropdownMenu>
-                <DropdownItem onClick={convertMenuItemClickedHandler} className="d-flex align-items-center">
-                  <span className="material-symbols-outlined me-1">refresh</span>
+                <DropdownItem onClick={convertMenuItemClickedHandler}>
+                  <span className="material-symbols-outlined">refresh</span>
                   {t('private_legacy_pages.convert_all_selected_pages')}
                 </DropdownItem>
                 <DropdownItem onClick={deleteAllButtonClickedHandler}>
-                  <span className="text-danger d-flex align-items-cente">
-                    <span className="material-symbols-outlined me-1">delete</span>
+                  <span className="text-danger">
+                    <span className="material-symbols-outlined">delete</span>
                     {t('search_result.delete_all_selected_page')}
                   </span>
                 </DropdownItem>

apps/app/src/components/PrivateLegacyPagesMigrationModal.tsx

@@ -88,8 +88,8 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessageList errs={errs} />
-        <button type="button" className="btn btn-primary d-flex align-items-center" onClick={submit}>
-          <span className="material-symbols-outlined me-1" aria-hidden="true">refresh</span>
+        <button type="button" className="btn btn-primary" onClick={submit}>
+          <span className="material-symbols-outlined" aria-hidden="true">refresh</span>
           { t('private_legacy_pages.modal.button_label') }
         </button>
       </ModalFooter>

apps/app/src/components/PutbackPageModal.jsx

@@ -59,9 +59,9 @@ const PutBackPageModal = () => {
       return <></>;
     }
     return (
-      <div className="d-flex align-items-center">
-        <span className="material-symbols-outlined me-1" aria-hidden="true">undo</span> { t('modal_putback.label.Put Back Page') }
-      </div>
+      <>
+        <span className="material-symbols-outlined" aria-hidden="true">undo</span> { t('modal_putback.label.Put Back Page') }
+      </>
     );
   };
 
@@ -101,7 +101,7 @@ const PutBackPageModal = () => {
     return (
       <>
         <ApiErrorMessageList errs={errs} targetPath={targetPath} />
-        <button type="button" className="btn btn-info d-flex align-items-center" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
+        <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
           <span className="material-symbols-outlined" aria-hidden="true">undo</span> { t('Put Back') }
         </button>
       </>

apps/app/src/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -60,7 +60,7 @@ export const RichAttachment = React.memo((props: RichAttachmentProps) => {
             <img src="/images/icons/editor/attachment.svg" className="attachment-icon" alt="attachment icon" />
           </div>
           <div className="ps-0">
-            <div className="d-flex align-items-center">
+            <div className="d-inline-block">
               {/* Since we need to include the "referer" to view the attachment on the shared page */}
               {/* eslint-disable-next-line react/jsx-no-target-blank */}
               <a target="_blank" rel="noopener" href={filePathProxied}>

apps/app/src/components/SearchPage.tsx

@@ -185,7 +185,7 @@ export const SearchPage = (): JSX.Element => {
           >
             <button
               type="button"
-              className="btn btn-outline-danger text-nowrap border-0 px-2 d-flex align-items-center"
+              className="btn btn-outline-danger text-nowrap border-0 px-2"
               disabled={isDisabled}
               onClick={deleteAllButtonClickedHandler}
             >

apps/app/src/components/Sidebar/Custom/CustomSidebarNotFound.tsx

@@ -6,8 +6,8 @@ export const SidebarNotFound = (): JSX.Element => {
 
   return (
     <div className="grw-sidebar-content-header h5 text-center py-3">
-      <Link href="/Sidebar#edit" className="d-flex align-items-center">
-        <span className="material-symbols-outlined me-1">edit_note</span>
+      <Link href="/Sidebar#edit">
+        <span className="material-symbols-outlined">edit_note</span>
         {/* eslint-disable-next-line react/no-danger */}
         <span dangerouslySetInnerHTML={{ __html: t('Create Sidebar Page') }}></span>
       </Link>

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.tsx

@@ -68,34 +68,34 @@ export const PersonalDropdown = (): JSX.Element => {
           <li>
             <Link
               href={pagePathUtils.userHomepagePath(currentUser)}
-              className="dropdown-item d-flex align-items-center"
+              className="dropdown-item"
               data-testid="grw-personal-dropdown-menu-user-home"
             >
-              <span className="material-symbols-outlined me-1">home</span>{t('personal_dropdown.home')}
+              <i className="icon-fw icon-home"></i>{t('personal_dropdown.home')}
             </Link>
           </li>
           <li>
             <Link
               href="/me"
-              className="dropdown-item d-flex align-items-center"
+              className="dropdown-item"
               data-testid="grw-personal-dropdown-menu-user-settings"
             >
-              <span className="material-symbols-outlined me-1">build</span>{t('personal_dropdown.settings')}
+              <i className="icon-fw icon-wrench"></i>{t('personal_dropdown.settings')}
             </Link>
           </li>
           <li>
             <button
               data-testid="grw-proactive-questionnaire-modal-toggle-btn"
               type="button"
-              className="dropdown-item d-flex align-items-center"
+              className="dropdown-item"
               onClick={() => setQuestionnaireModalOpen(true)}
             >
-              <span className="material-symbols-outlined me-1">edit</span>{t('personal_dropdown.feedback')}
+              <span className="material-symbols-outlined">edit</span>{t('personal_dropdown.feedback')}
             </button>
           </li>
           <li>
-            <button type="button" className="dropdown-item d-flex align-items-center" onClick={logoutHandler}>
-              <span className="material-symbols-outlined me-1">power_settings_new</span>{t('Sign out')}
+            <button type="button" className="dropdown-item" onClick={logoutHandler}>
+              <i className="icon-fw icon-power"></i>{t('Sign out')}
             </button>
           </li>
         </ul>

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginDeleteModal.tsx

@@ -43,8 +43,8 @@ export const PluginDeleteModal: React.FC = () => {
   return (
     <Modal isOpen={isOpen} toggle={toggleHandler}>
       <ModalHeader tag="h4" toggle={toggleHandler} className="bg-danger text-light" name={name}>
-        <span className="d-flex align-items-center">
-          <span className="material-symbols-outlined me-1">delete_forever</span>
+        <span>
+          <span className="material-symbols-outlined">delete_forever</span>
           {t('plugins.confirm')}
         </span>
       </ModalHeader>
@@ -54,7 +54,7 @@ export const PluginDeleteModal: React.FC = () => {
         </div>
       </ModalBody>
       <ModalFooter>
-        <Button color="danger" className="d-flex align-items-center" onClick={onClickDeleteButtonHandler}>
+        <Button color="danger" onClick={onClickDeleteButtonHandler}>
           <span className="material-symbols-outlined">delete_forever</span>
           {t('Delete')}
         </Button>

apps/app/src/pages/reset-password.page.tsx

@@ -26,7 +26,7 @@ const ForgotPasswordPage: NextPage<Props> = (props: Props) => {
           <div className="row justify-content-md-center">
             <div className="col-md-6 mt-5">
               <div className="text-center">
-                <h1><span className="material-symbols-outlined fs-1">lock_open_right</span></h1>
+                <h1><i className="icon-lock-open large"></i></h1>
                 <h2 className="text-center">{ t('forgot_password.reset_password') }</h2>
                 <h5>{ props.email }</h5>
                 <p className="mt-4">{ t('forgot_password.password_reset_excecution_desc') }</p>