replace material-icons with material-symbols

apps/app/_obsolete/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -106,7 +106,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
       <button className="btn btn-primary" type="button" data-bs-toggle="dropdown" ref={buttonRef} aria-haspopup="true">
-        <i className="material-icons">settings</i>
+        <span className="material-symbols-outlined">settings</span>
       </button>
 
       {/* dropdown */}

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

@@ -233,7 +233,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
                 onClick={loadChildFolder}
               >
                 <div className="d-flex justify-content-center">
-                  <span className="material-icons-round">arrow_right</span>
+                  <span className="material-symbols-rounded">arrow_right</span>
                 </div>
               </button>
             )}

apps/app/src/components/Sidebar/PageCreateButton.tsx

@@ -15,7 +15,6 @@ export const PageCreateButton = React.memo((): JSX.Element => {
     setIsHovered(false);
   };
 
-  const iconName = 'create';
   const isSelected = true;
   // TODO: create page directly
   // TODO: https://redmine.weseek.co.jp/issues/132680s
@@ -49,7 +48,7 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           type="button"
           data-testid="grw-sidebar-nav-page-create-button"
         >
-          <i className="material-icons">{iconName}</i>
+          <i className="material-symbols-outlined">edit</i>
         </button>
       </div>
       {isHovered && (

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -12,7 +12,7 @@
 
 // icon
 .btn-toggle-collapse :global {
-  .material-icons {
+  .material-symbols-outlined {
     transition: transform 0.25s;
 
     // rotation

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -35,7 +35,7 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
       className={`btn btn-primary ${styles['btn-toggle-collapse']} p-2`}
       onClick={isDrawerMode() ? toggleDrawer : toggleCollapsed}
     >
-      <span className={`material-icons fs-2 ${rotationClass}`}>{icon}</span>
+      <span className={`material-symbols-outlined fs-2 ${rotationClass}`}>{icon}</span>
     </button>
   );
 });

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

@@ -80,7 +80,7 @@ const PrimaryItem: FC<PrimaryItemProps> = (props: PrimaryItemProps) => {
       onClick={itemClickedHandler}
       onMouseEnter={mouseEnteredHandler}
     >
-      <i className="material-icons">{iconName}</i>
+      <span className="material-symbols-outlined">{iconName}</span>
     </button>
   );
 };
@@ -104,7 +104,7 @@ export const PrimaryItems = memo((props: Props) => {
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.TREE} label="Page Tree" iconName="format_list_bulleted" onHover={onItemHover} />
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.CUSTOM} label="Custom Sidebar" iconName="code" onHover={onItemHover} />
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onHover={onItemHover} />
-      <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmark" onHover={onItemHover} />
+      <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmarks" onHover={onItemHover} />
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onHover={onItemHover} />
       <InAppNotificationDropdown />
     </div>

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

@@ -28,7 +28,7 @@ const SecondaryItem: FC<SecondaryItemProps> = (props: SecondaryItemProps) => {
       target={`${isBlank ? '_blank' : ''}`}
       prefetch={false}
     >
-      <i className="material-icons">{iconName}</i>
+      <i className="material-symbols-outlined">{iconName}</i>
     </Link>
   );
 };

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -247,7 +247,7 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
               onClick={onClickLoadChildren}
             >
               <div className="d-flex justify-content-center">
-                <span className="material-icons-round">arrow_right</span>
+                <span className="material-symbols-rounded">arrow_right</span>
               </div>
             </button>
           )}

apps/app/src/features/questionnaire/client/components/QuestionnaireModal.tsx

@@ -149,12 +149,12 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
 
             {currentUser?.admin && (
               <a href="/admin/app#questionnaire-settings">
-                <i className="material-icons me-1">admin_panel_settings</i>
+                <i className="material-symbols-outlined me-1">admin_panel_settings</i>
               </a>
             )}
             {currentUser != null && (
               <a href="/me#other_settings">
-                <i className="material-icons">settings</i>
+                <i className="material-symbols-outlined">settings</i>
               </a>
             )}
           </div>

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsButton.tsx

@@ -17,7 +17,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
     return (
       <>
         <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
-          <span className="material-icons-outlined fs-5">attach_file</span>
+          <span className="material-symbols-outlined fs-5">attach_file</span>
           Files
         </DropdownItem>
       </>
@@ -27,7 +27,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
     return (
       <>
         <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
-          <span className="material-icons-outlined fs-5">image</span>
+          <span className="material-symbols-outlined fs-5">image</span>
           Images
         </DropdownItem>
       </>

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -22,17 +22,17 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
     <>
       <UncontrolledDropdown direction="up" className="lh-1">
         <DropdownToggle className="btn-toolbar-button rounded-circle">
-          <span className="material-icons fs-6">add</span>
+          <span className="material-symbols-outlined fs-6">add</span>
         </DropdownToggle>
         <DropdownMenu>
           <DropdownItem className="d-flex gap-1 align-items-center" header>
-            <span className="material-icons-outlined fs-5">add_circle_outline</span>
+            <span className="material-symbols-outlined fs-5">add_circle_outline</span>
             Attachments
           </DropdownItem>
           <DropdownItem divider />
           <AttachmentsButton onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
           <DropdownItem className="d-flex gap-1 align-items-center">
-            <span className="material-icons-outlined fs-5">link</span>
+            <span className="material-symbols-outlined fs-5">link</span>
             Link
           </DropdownItem>
         </DropdownMenu>

packages/editor/src/components/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -1,7 +1,7 @@
 export const DiagramButton = (): JSX.Element => {
   return (
     <button type="button" className="btn btn-toolbar-button">
-      <span className="material-icons-outlined fs-6">lan</span>
+      <span className="material-symbols-outlined fs-5">lan</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -1,7 +1,7 @@
 export const EmojiButton = (): JSX.Element => {
   return (
     <button type="button" className="btn btn-toolbar-button">
-      <span className="material-icons-outlined fs-6">emoji_emotions</span>
+      <span className="material-symbols-outlined fs-5">emoji_emotions</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -1,7 +1,7 @@
 export const TableButton = (): JSX.Element => {
   return (
     <button type="button" className="btn btn-toolbar-button">
-      <span className="material-icons-outlined fs-6">table_chart</span>
+      <span className="material-symbols-outlined fs-5">table_chart</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/TemplateButton.tsx

@@ -1,7 +1,7 @@
 export const TemplateButton = (): JSX.Element => {
   return (
     <button type="button" className="btn btn-toolbar-button">
-      <span className="material-icons-outlined fs-6">file_copy</span>
+      <span className="material-symbols-outlined fs-5">file_copy</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -20,7 +20,7 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
       className="btn btn-toolbar-button"
       onClick={onClick}
     >
-      <span className="material-icons fs-5">text_increase</span>
+      <span className="material-symbols-outlined fs-5">match_case</span>
     </button>
   );
 };
@@ -39,31 +39,31 @@ export const TextFormatTools = (): JSX.Element => {
       <Collapse isOpen={isOpen} horizontal>
         <div className="d-flex px-1 gap-1" style={{ width: '220px' }}>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_bold</span>
+            <span className="material-symbols-outlined fs-5">format_bold</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_italic</span>
+            <span className="material-symbols-outlined fs-5">format_italic</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_strikethrough</span>
+            <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">block</span>
+            <span className="material-symbols-outlined fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">code</span>
+            <span className="material-symbols-outlined fs-5">code</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_list_bulleted</span>
+            <span className="material-symbols-outlined fs-5">format_list_bulleted</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_list_numbered</span>
+            <span className="material-symbols-outlined fs-5">format_list_numbered</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">block</span>
+            <span className="material-symbols-outlined fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">checklist</span>
+            <span className="material-symbols-outlined fs-5">checklist</span>
           </button>
         </div>
       </Collapse>