Merge pull request #8182 from weseek/support/install-material-symbols

support: Install 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/package.json

@@ -212,6 +212,7 @@
     "@growi/ui": "link:../../packages/ui",
     "@handsontable/react": "=2.1.0",
     "@icon/themify-icons": "1.0.1-alpha.3",
+    "@material-symbols/font-300": "^0.13.1",
     "@next/bundle-analyzer": "^13.2.3",
     "@swc-node/jest": "^1.6.2",
     "@swc/jest": "^0.2.24",
@@ -236,7 +237,6 @@
     "jest-date-mock": "^1.0.8",
     "jest-localstorage-mock": "^2.4.14",
     "load-css-file": "^1.0.0",
-    "material-icons": "^1.13.10",
     "mongodb-memory-server": "^8.12.2",
     "morgan": "^1.10.0",
     "null-loader": "^4.0.1",

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

@@ -13,7 +13,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>

apps/app/src/styles/font-icons.scss

@@ -2,7 +2,6 @@
 // font-familiy used in simple-line-icons has to be prioritized than the one used in font-awesome.
 @import 'font-awesome';
 @import 'simple-line-icons';
-@import 'material-icons/iconfont/filled';
-@import 'material-icons/iconfont/outlined';
-@import 'material-icons/iconfont/round';
+@import '@material-symbols/font-300/outlined';
+@import '@material-symbols/font-300/rounded';
 @import '@icon/themify-icons/themify-icons';

packages/editor/package.json

@@ -26,6 +26,7 @@
     "@codemirror/language": "^6.8.0",
     "@codemirror/state": "^6.2.1",
     "@codemirror/view": "^6.15.3",
+    "@material-symbols/font-300": "^0.13.1",
     "@popperjs/core": "^2.11.8",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
@@ -33,7 +34,6 @@
     "bootstrap": "^5.3.1",
     "codemirror": "^6.0.1",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "material-icons": "^1.13.10",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.45.4",
     "react-toastify": "^9.1.3",

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>

packages/editor/src/components/CodeMirrorEditor/Toolbar/scss/toolbar-button.scss

@@ -1,10 +1,9 @@
 .btn-toolbar-button {
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+  --bs-btn-line-height: 1;
+  --bs-btn-border-width: 0;
+
   width: 24px !important;
   height: 24px !important;
-  padding: 0 !important;
-  font-size: 1rem !important;
-  line-height: 1 !important;
-  text-align: center !important;
-
-  border: 0;
 }

packages/editor/src/main.scss

@@ -1,9 +1,8 @@
 @import 'bootstrap';
 @import 'react-toastify/scss/main';
 
-$material-icons-font-path: 'material-icons/iconfont/';
-@import 'material-icons/iconfont/filled';
-@import 'material-icons/iconfont/outlined';
-@import 'material-icons/iconfont/round';
+$material-symbols-font-path: '@material-symbols/font-300/';
+@import '@material-symbols/font-300/outlined';
+@import '@material-symbols/font-300/rounded';
 
 @import '@growi/core/scss/flex-expand';

yarn.lock

@@ -3229,6 +3229,11 @@
     markdown-it-front-matter "^0.2.3"
     postcss "^8.4.19"
 
+"@material-symbols/font-300@^0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@material-symbols/font-300/-/font-300-0.13.1.tgz#33e1914565a8a8e421cb9de502ec5f6ccdc80256"
+  integrity sha512-3UcU9kw/1hKDyjkeOuv2wx9nwr5XSpbl/GG+o9+TY5xZ3ogeruNQ5aS7mRXqTxQiizLXtmkYeNUcS3N4fLQonQ==
+
 "@microsoft/api-extractor-model@7.27.5":
   version "7.27.5"
   resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.27.5.tgz#2220cf20c8587cd4cf78f82c20c4011a9e36a60f"
@@ -11089,11 +11094,6 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.2.tgz#9b59eb2c1b22fe71954a65ff512887065a7bb57c"
   integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
 
-material-icons@^1.13.10:
-  version "1.13.12"
-  resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-1.13.12.tgz#eed4082bf0426642edeb027e75397e3064adc536"
-  integrity sha512-/2YoaB79IjUK2B2JB+vIXXYGtBfHb/XG66LvoKVM5ykHW7yfrV5SP6d7KLX6iijY6/G9GqwgtPQ/sbhFnOURVA==
-
 mathjax-full@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.2.2.tgz#43f02e55219db393030985d2b6537ceae82f1fa7"