Added properly typed icons

src/components/AppLayout.tsx

@@ -4,13 +4,7 @@ import { UploadImageFragment } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyLanguage, prettySlug } from "helpers/formatters";
 import { getOgImage, ImageQuality, OgImage } from "helpers/img";
-import {
+import { getClient, Indexes, search, SearchResult } from "helpers/search";
-  getClient,
-  getIndexes,
-  Indexes,
-  search,
-  SearchResult,
-} from "helpers/search";
 import { Immutable } from "helpers/types";
 import { useMediaMobile } from "hooks/useMediaQuery";
 import { AnchorIds } from "hooks/useScrollTopOnChange";
@@ -18,6 +12,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { useSwipeable } from "react-swipeable";
+import { Ico, Icon } from "./Ico";
 import { OrderableList } from "./Inputs/OrderableList";
 import { Select } from "./Inputs/Select";
 import { MainPanel } from "./Panels/MainPanel";
@@ -26,7 +21,7 @@ import { PreviewCard } from "./PreviewCard";
 
 interface Props extends AppStaticProps {
   subPanel?: React.ReactNode;
-  subPanelIcon?: string;
+  subPanelIcon?: Icon;
   contentPanel?: React.ReactNode;
   title?: string;
   navTitle: string | null | undefined;
@@ -45,7 +40,7 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
     title,
     navTitle,
     description,
-    subPanelIcon = "tune",
+    subPanelIcon = Icon.Tune,
   } = props;
   const router = useRouter();
   const isMobile = useMediaMobile();
@@ -300,15 +295,14 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
           className="texture-paper-dots grid grid-cols-[5rem_1fr_5rem] place-items-center
           border-t-[1px] border-dotted border-black bg-light [grid-area:navbar] desktop:hidden"
         >
-          <span
+          <Ico
-            className="material-icons mt-[.1em] cursor-pointer"
+            icon={appLayout.mainPanelOpen ? Icon.Close : Icon.Menu}
+            className="mt-[.1em] cursor-pointer"
             onClick={() => {
               appLayout.setMainPanelOpen(!appLayout.mainPanelOpen);
               appLayout.setSubPanelOpen(false);
             }}
-          >
+          />
-            {appLayout.mainPanelOpen ? "close" : "menu"}
-          </span>
           <p
             className={`overflow-hidden text-center font-headers font-black ${
               ogTitle && ogTitle.length > 30
@@ -318,19 +312,16 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
           >
             {ogTitle}
           </p>
-          <span
+          {subPanel && !turnSubIntoContent && (
-            className="material-icons mt-[.1em] cursor-pointer"
+            <Ico
-            onClick={() => {
+              icon={appLayout.subPanelOpen ? Icon.Close : subPanelIcon}
-              appLayout.setSubPanelOpen(!appLayout.subPanelOpen);
+              className="mt-[.1em] cursor-pointer"
-              appLayout.setMainPanelOpen(false);
+              onClick={() => {
-            }}
+                appLayout.setSubPanelOpen(!appLayout.subPanelOpen);
-          >
+                appLayout.setMainPanelOpen(false);
-            {subPanel && !turnSubIntoContent
+              }}
-              ? appLayout.subPanelOpen
+            />
-                ? "close"
+          )}
-                : subPanelIcon
-              : ""}
-          </span>
         </div>
 
         <Popup
@@ -398,18 +389,16 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
                       appLayout.darkMode === false
                     }
                     className="rounded-r-none"
-                  >
+                    text={langui.light}
-                    {langui.light}
+                  />
-                  </Button>
                   <Button
                     onClick={() => {
                       appLayout.setSelectedThemeMode(false);
                     }}
                     active={appLayout.selectedThemeMode === false}
                     className="rounded-l-none rounded-r-none border-x-0"
-                  >
+                    text={langui.auto}
-                    {langui.auto}
+                  />
-                  </Button>
                   <Button
                     onClick={() => {
                       appLayout.setDarkMode(true);
@@ -420,9 +409,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
                       appLayout.darkMode === true
                     }
                     className="rounded-l-none"
-                  >
+                    text={langui.dark}
-                    {langui.dark}
+                  />
-                  </Button>
                 </div>
               </div>
 
@@ -450,23 +438,18 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
                           : 1 / 1.05
                       )
                     }
-                  >
+                    icon={Icon.TextDecrease}
-                    <span className="material-icons !text-base">
+                  />
-                      text_decrease
-                    </span>
-                  </Button>
                   <Button
                     className="rounded-l-none rounded-r-none border-x-0"
                     onClick={() => appLayout.setFontSize(1)}
-                  >
+                    text={`${((appLayout.fontSize ?? 1) * 100).toLocaleString(
-                    {((appLayout.fontSize ?? 1) * 100).toLocaleString(
                       undefined,
                       {
                         maximumFractionDigits: 0,
                       }
-                    )}
+                    )}%`}
-                    %
+                  />
-                  </Button>
                   <Button
                     className="rounded-l-none"
                     onClick={() =>
@@ -476,11 +459,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
                           : 1 * 1.05
                       )
                     }
-                  >
+                    icon={Icon.TextIncrease}
-                    <span className="material-icons !text-base">
+                  />
-                      text_increase
-                    </span>
-                  </Button>
                 </div>
               </div>
 
@@ -491,16 +471,14 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
                     active={appLayout.dyslexic === false}
                     onClick={() => appLayout.setDyslexic(false)}
                     className="font-zenMaruGothic"
-                  >
+                    text="Zen Maru Gothic"
-                    Zen Maru Gothic
+                  />
-                  </Button>
                   <Button
                     active={appLayout.dyslexic === true}
                     onClick={() => appLayout.setDyslexic(true)}
                     className="font-openDyslexic"
-                  >
+                    text="OpenDyslexic"
-                    OpenDyslexic
+                  />
-                  </Button>
                 </div>
               </div>
 

src/components/Inputs/Button.tsx

@@ -1,3 +1,4 @@
+import { Ico, Icon } from "components/Ico";
 import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
 import { MouseEventHandler } from "react";
@@ -6,8 +7,9 @@ interface Props {
   id?: string;
   className?: string;
   href?: string;
-  children: React.ReactNode;
   active?: boolean;
+  icon?: Icon;
+  text?: string | null | undefined;
   locale?: string;
   target?: "_blank";
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -22,7 +24,8 @@ export function Button(props: Immutable<Props>): JSX.Element {
     onClick,
     active,
     className,
-    children,
+    icon,
+    text,
     target,
     href,
     locale,
@@ -52,7 +55,8 @@ export function Button(props: Immutable<Props>): JSX.Element {
           {badgeNumber}
         </div>
       )}
-      {children}
+      {icon && <Ico icon={icon} />}
+      <p>{text}</p>
     </div>
   );
 

src/components/Inputs/LanguageSwitcher.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "components/Ico";
 import { AppStaticProps } from "graphql/getAppStaticProps";
 import { prettyLanguage } from "helpers/formatters";
 import { Immutable } from "helpers/types";
@@ -26,18 +27,18 @@ export function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
                 <Button
                   active={value === localesIndex}
                   onClick={() => setLocalesIndex(value)}
-                >
+                  text={prettyLanguage(locale, props.languages)}
-                  {prettyLanguage(locale, props.languages)}
+                />
-                </Button>
               )}
             </Fragment>
           ))}
         </div>
       }
     >
-      <Button badgeNumber={locales.size > 1 ? locales.size : undefined}>
+      <Button
-        <span className="material-icons">translate</span>
+        badgeNumber={locales.size > 1 ? locales.size : undefined}
-      </Button>
+        icon={Icon.Translate}
+      />
     </ToolTip>
   );
 }

src/components/Inputs/OrderableList.tsx

@@ -1,3 +1,4 @@
+import { Ico, Icon } from "components/Ico";
 import { arrayMove } from "helpers/others";
 import { Immutable } from "helpers/types";
 import { Fragment, useEffect, useState } from "react";
@@ -63,24 +64,22 @@ export function OrderableList(props: Immutable<Props>): JSX.Element {
           >
             <div className="grid grid-rows-[.8em_.8em] place-items-center">
               {index > 0 && (
-                <span
+                <Ico
-                  className="material-icons row-start-1 cursor-pointer"
+                  icon={Icon.ArrowDropUp}
+                  className="row-start-1 cursor-pointer"
                   onClick={() => {
                     updateOrder(index, index - 1);
                   }}
-                >
+                />
-                  arrow_drop_up
-                </span>
               )}
               {index < items.size - 1 && (
-                <span
+                <Ico
-                  className="material-icons row-start-2 cursor-pointer"
+                  icon={Icon.ArrowDropDown}
+                  className="row-start-2 cursor-pointer"
                   onClick={() => {
                     updateOrder(index, index + 1);
                   }}
-                >
+                />
-                  arrow_drop_down
-                </span>
               )}
             </div>
             {value}

src/components/Inputs/PageSelector.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "components/Ico";
 import { Immutable } from "helpers/types";
 import { Dispatch, SetStateAction } from "react";
 import { Button } from "./Button";
@@ -19,18 +20,19 @@ export function PageSelector(props: Immutable<Props>): JSX.Element {
           if (page > 0) setPage(page - 1);
         }}
         className="rounded-r-none"
-      >
+        icon={Icon.NavigateBefore}
-        <span className="material-icons">navigate_before</span>
+      />
-      </Button>
+      <Button
-      <Button className="rounded-none border-x-0">{page + 1}</Button>
+        className="rounded-none border-x-0"
+        text={(page + 1).toString()}
+      />
       <Button
         onClick={() => {
           if (page < maxPage) setPage(page + 1);
         }}
         className="rounded-l-none"
-      >
+        icon={Icon.NavigateNext}
-        <span className="material-icons">navigate_next</span>
+      />
-      </Button>
     </div>
   );
 }

src/components/Inputs/Select.tsx

@@ -1,3 +1,4 @@
+import { Ico, Icon } from "components/Ico";
 import { Immutable } from "helpers/types";
 import { Dispatch, Fragment, SetStateAction, useState } from "react";
 
@@ -31,16 +32,16 @@ export function Select(props: Immutable<Props>): JSX.Element {
           {state === -1 ? "—" : options[state]}
         </p>
         {state >= 0 && allowEmpty && (
-          <span
+          <Ico
+            icon={Icon.Close}
+            className="!text-xs"
             onClick={() => setState(-1)}
-            className="material-icons !text-xs"
+          />
-          >
-            close
-          </span>
         )}
-        <span onClick={() => setOpened(!opened)} className="material-icons">
+        <Ico
-          {opened ? "arrow_drop_up" : "arrow_drop_down"}
+          onClick={() => setOpened(!opened)}
-        </span>
+          icon={opened ? Icon.ArrowDropUp : Icon.ArrowDropDown}
+        />
       </div>
       <div
         className={`left-0 right-0 rounded-b-[1em] ${

src/components/Library/ContentLine.tsx

@@ -1,4 +1,5 @@
 import { Chip } from "components/Chip";
+import { Ico, Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { GetLibraryItemQuery } from "graphql/generated";
 import { AppStaticProps } from "graphql/getAppStaticProps";
@@ -83,25 +84,21 @@ export function ContentLine(props: Immutable<Props>): JSX.Element {
             opened ? "grid" : "hidden"
           }`}
         >
-          <span className="material-icons text-dark">
+          <Ico icon={Icon.SubdirectoryArrowRight} className="text-dark" />
-            subdirectory_arrow_right
-          </span>
 
           {content.attributes.scan_set &&
             content.attributes.scan_set.length > 0 && (
               <Button
                 href={`/library/${parentSlug}/scans#${content.attributes.slug}`}
-              >
+                text={langui.view_scans}
-                {langui.view_scans}
+              />
-              </Button>
             )}
 
           {content.attributes.content?.data && (
             <Button
               href={`/contents/${content.attributes.content.data.attributes?.slug}`}
-            >
+              text={langui.open_content}
-              {langui.open_content}
+            />
-            </Button>
           )}
 
           {content.attributes.scan_set &&

src/components/Library/ScanSet.tsx

@@ -100,9 +100,10 @@ export function ScanSet(props: Immutable<Props>): JSX.Element {
 
           <div className="flex flex-row flex-wrap place-items-center gap-4 pb-6">
             {content?.data?.attributes?.slug && (
-              <Button href={`/contents/${content.data.attributes.slug}`}>
+              <Button
-                {langui.open_content}
+                href={`/contents/${content.data.attributes.slug}`}
-              </Button>
+                text={langui.open_content}
+              />
             )}
 
             <LanguageSwitcher />

src/components/LightBox.tsx

@@ -5,6 +5,7 @@ import { useSwipeable } from "react-swipeable";
 import { Img } from "./Img";
 import { Button } from "./Inputs/Button";
 import { Popup } from "./Popup";
+import { Icon } from "components/Ico";
 
 interface Props {
   setState:
@@ -63,9 +64,7 @@ export function LightBox(props: Immutable<Props>): JSX.Element {
             >
               <div className="[grid-area:left]">
                 {index > 0 && (
-                  <Button onClick={handlePrevious}>
+                  <Button onClick={handlePrevious} icon={Icon.ChevronLeft} />
-                    <span className="material-icons">chevron_left</span>
-                  </Button>
                 )}
               </div>
 
@@ -76,9 +75,7 @@ export function LightBox(props: Immutable<Props>): JSX.Element {
 
               <div className="[grid-area:right]">
                 {index < images.length - 1 && (
-                  <Button onClick={handleNext}>
+                  <Button onClick={handleNext} icon={Icon.ChevronRight} />
-                    <span className="material-icons">chevron_right</span>
-                  </Button>
                 )}
               </div>
             </div>

src/components/Markdown/Markdawn.tsx

@@ -1,4 +1,5 @@
 import { HorizontalLine } from "components/HorizontalLine";
+import { Ico, Icon } from "components/Ico";
 import { Img } from "components/Img";
 import { InsetBox } from "components/InsetBox";
 import { ToolTip } from "components/ToolTip";
@@ -284,8 +285,9 @@ function HeaderToolTip(props: { id: string }) {
       className="text-sm"
     >
       <ToolTip content={"Copied! 👍"} trigger="click" className="text-sm">
-        <span
+        <Ico
-          className="material-icons transition-color cursor-pointer hover:text-dark"
+          icon={Icon.Link}
+          className="transition-color cursor-pointer hover:text-dark"
           onClick={() => {
             navigator.clipboard.writeText(
               `${process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname}#${
@@ -293,9 +295,7 @@ function HeaderToolTip(props: { id: string }) {
               }`
             );
           }}
-        >
+        />
-          link
-        </span>
       </ToolTip>
     </ToolTip>
   );

src/components/PanelComponents/NavOption.tsx

@@ -1,3 +1,4 @@
+import { Ico, Icon } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import { Immutable } from "helpers/types";
 import { useRouter } from "next/router";
@@ -5,7 +6,7 @@ import { MouseEventHandler } from "react";
 
 interface Props {
   url: string;
-  icon?: string;
+  icon?: Icon;
   title: string | null | undefined;
   subtitle?: string | null | undefined;
   border?: boolean;
@@ -54,9 +55,7 @@ export function NavOption(props: Immutable<Props>): JSX.Element {
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}
       >
-        {props.icon && (
+        {props.icon && <Ico icon={props.icon} className="mt-[.1em]" />}
-          <span className="material-icons mt-[.1em]">{props.icon}</span>
-        )}
 
         {!props.reduced && (
           <div>

src/components/PanelComponents/PanelHeader.tsx

@@ -1,8 +1,9 @@
 import { HorizontalLine } from "components/HorizontalLine";
+import { Ico, Icon } from "components/Ico";
 import { Immutable } from "helpers/types";
 
 interface Props {
-  icon?: string;
+  icon?: Icon;
   title: string | null | undefined;
   description?: string | null | undefined;
 }
@@ -11,9 +12,7 @@ export function PanelHeader(props: Immutable<Props>): JSX.Element {
   return (
     <>
       <div className="grid w-full place-items-center">
-        {props.icon && (
+        {props.icon && <Ico icon={props.icon} className="mb-3 !text-4xl" />}
-          <span className="material-icons mb-3 !text-4xl">{props.icon}</span>
-        )}
         <h2 className="text-2xl">{props.title}</h2>
         {props.description ? <p>{props.description}</p> : ""}
       </div>

src/components/PanelComponents/ReturnButton.tsx

@@ -1,4 +1,5 @@
 import { HorizontalLine } from "components/HorizontalLine";
+import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { AppStaticProps } from "graphql/getAppStaticProps";
@@ -36,10 +37,9 @@ export function ReturnButton(props: Immutable<Props>): JSX.Element {
         onClick={() => appLayout.setSubPanelOpen(false)}
         href={props.href}
         className="grid grid-flow-col gap-2"
-      >
+        text={`${props.langui.return_to} ${props.title}`}
-        <span className="material-icons">navigate_before</span>
+        icon={Icon.NavigateBefore}
-        {props.langui.return_to} {props.title}
+      />
-      </Button>
       {props.horizontalLine && <HorizontalLine />}
     </div>
   );

src/components/Panels/MainPanel.tsx

@@ -8,6 +8,7 @@ import { Immutable } from "helpers/types";
 import { useMediaDesktop } from "hooks/useMediaQuery";
 import Markdown from "markdown-to-jsx";
 import Link from "next/link";
+import { Icon } from "components/Ico";
 
 interface Props {
   langui: AppStaticProps["langui"];
@@ -34,9 +35,12 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
           appLayout.setMainPanelReduced(!appLayout.mainPanelReduced)
         }
       >
-        <Button className="material-icons bg-light !px-2">
+        <Button
-          {appLayout.mainPanelReduced ? "chevron_right" : "chevron_left"}
+          className="bg-light !px-2"
-        </Button>
+          icon={
+            appLayout.mainPanelReduced ? Icon.ChevronRight : Icon.ChevronLeft
+          }
+        />
       </div>
 
       <div>
@@ -74,9 +78,8 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
                 onClick={() => {
                   appLayout.setConfigPanelOpen(true);
                 }}
-              >
+                icon={Icon.Settings}
-                <span className={"material-icons"}>settings</span>
+              />
-              </Button>
             </ToolTip>
 
             <ToolTip
@@ -89,9 +92,8 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
                 onClick={() => {
                   appLayout.setSearchPanelOpen(true);
                 }}
-              >
+                icon={Icon.Search}
-                <span className={"material-icons"}>search</span>
+              />
-              </Button>
             </ToolTip>
           </div>
         </div>
@@ -101,7 +103,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
 
       <NavOption
         url="/library"
-        icon="library_books"
+        icon={Icon.LibraryBooks}
         title={langui.library}
         subtitle={langui.library_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
@@ -109,7 +111,7 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
 
       <NavOption
         url="/contents"
-        icon="workspaces"
+        icon={Icon.Workspaces}
         title={langui.contents}
         subtitle={langui.contents_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
@@ -117,63 +119,61 @@ export function MainPanel(props: Immutable<Props>): JSX.Element {
 
       <NavOption
         url="/wiki"
-        icon="travel_explore"
+        icon={Icon.TravelExplore}
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
         reduced={appLayout.mainPanelReduced && isDesktop}
       />
 
       {/*
-
       <NavOption
         url="/chronicles"
-        icon="watch_later"
+        icon={Icon.WatchLater}
         title={langui.chronicles}
         subtitle={langui.chronicles_short_description}
         
         reduced={appLayout.mainPanelReduced && isDesktop}
         
       />
-      
       */}
 
       <HorizontalLine />
 
       <NavOption
         url="/news"
-        icon="feed"
+        icon={Icon.Feed}
         title={langui.news}
         reduced={appLayout.mainPanelReduced && isDesktop}
       />
+
       {/*
       <NavOption
         url="/merch"
-        icon="store"
+        icon={Icon.Store}
         title={langui.merch}
         
         reduced={appLayout.mainPanelReduced && isDesktop}
         
       />
-      
       */}
 
       <NavOption
         url="https://gallery.accords-library.com/"
-        icon="collections"
+        icon={Icon.Collections}
         title={langui.gallery}
         reduced={appLayout.mainPanelReduced && isDesktop}
       />
 
       <NavOption
         url="/archives"
-        icon="inventory"
+        icon={Icon.Inventory}
         title={langui.archives}
         reduced={appLayout.mainPanelReduced && isDesktop}
       />
 
       <NavOption
         url="/about-us"
-        icon="info"
+        icon={Icon.Info}
         title={langui.about_us}
         reduced={appLayout.mainPanelReduced && isDesktop}
       />

src/components/PreviewCard.tsx

@@ -15,6 +15,7 @@ import { ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
 import Link from "next/link";
 import { Chip } from "./Chip";
+import { Ico, Icon } from "./Ico";
 import { Img } from "./Img";
 
 interface Props {
@@ -69,17 +70,19 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
       <div className="flex w-full flex-row flex-wrap gap-x-3">
         {metadata.release_date && (
           <p className="text-sm mobile:text-xs">
-            <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+            <Ico
-              event
+              icon={Icon.Event}
-            </span>
+              className="mr-1 translate-y-[.15em] !text-base"
+            />
             {prettyDate(metadata.release_date)}
           </p>
         )}
         {metadata.price && metadata.currencies && (
           <p className="justify-self-end text-sm mobile:text-xs">
-            <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+            <Ico
-              shopping_cart
+              icon={Icon.ShoppingCart}
-            </span>
+              className="mr-1 translate-y-[.15em] !text-base"
+            />
             {prettyPrice(
               metadata.price,
               metadata.currencies,
@@ -89,17 +92,19 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
         )}
         {metadata.views && (
           <p className="text-sm mobile:text-xs">
-            <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+            <Ico
-              visibility
+              icon={Icon.Visibility}
-            </span>
+              className="mr-1 translate-y-[.15em] !text-base"
+            />
             {prettyShortenNumber(metadata.views)}
           </p>
         )}
         {metadata.author && (
           <p className="text-sm mobile:text-xs">
-            <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+            <Ico
-              person
+              icon={Icon.Person}
-            </span>
+              className="mr-1 translate-y-[.15em] !text-base"
+            />
             {metadata.author}
           </p>
         )}
@@ -175,12 +180,10 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
                   bg-shade bg-opacity-[var(--bg-opacity)] text-light
                   transition-colors drop-shadow-shade-lg"
                 >
-                  <span
+                  <Ico
-                    className="material-icons text-6xl
+                    icon={Icon.PlayCircleOutline}
-                    opacity-[var(--play-opacity)] transition-opacity"
+                    className="text-6xl opacity-[var(--play-opacity)] transition-opacity"
-                  >
+                  />
-                    play_circle_outline
-                  </span>
                 </div>
                 <div
                   className="absolute right-2 bottom-2 rounded-full bg-black

src/components/Wiki/Chronology/ChronologyItemComponent.tsx

@@ -1,4 +1,5 @@
 import { Chip } from "components/Chip";
+import { Ico, Icon } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import {
   Enum_Componenttranslationschronologyitem_Status,
@@ -150,10 +151,10 @@ export function ChronologyItemComponent(props: Immutable<Props>): JSX.Element {
                     {event.source?.data ? (
                       `(${event.source.data.attributes?.name})`
                     ) : (
-                      <>
+                      <div className="flex items-center gap-1">
-                        <span className="material-icons !text-sm">warning</span>
+                        <Ico icon={Icon.Warning} className="!text-sm" />
                         No sources!
-                      </>
+                      </div>
                     )}
                   </p>
                 </div>

src/pages/about-us/index.tsx

@@ -1,4 +1,5 @@
 import { AppLayout } from "components/AppLayout";
+import { Icon } from "components/Ico";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Panels/SubPanel";
@@ -13,7 +14,7 @@ export default function AboutUs(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="info"
+        icon={Icon.Info}
         title={langui.about_us}
         description={langui.about_us_description}
       />

src/pages/archives/index.tsx

@@ -5,6 +5,7 @@ import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
@@ -13,7 +14,7 @@ export default function Archives(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="inventory"
+        icon={Icon.Inventory}
         title={langui.archives}
         description={langui.archives_description}
       />

src/pages/archives/videos/c/[uid].tsx

@@ -21,6 +21,7 @@ import {
   GetStaticPropsContext,
 } from "next";
 import { Fragment, useState } from "react";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {
   channel: NonNullable<
@@ -43,7 +44,7 @@ export default function Channel(props: Props): JSX.Element {
       />
 
       <PanelHeader
-        icon="movie"
+        icon={Icon.Movie}
         title={langui.videos}
         description={langui.archives_description}
       />

src/pages/archives/videos/index.tsx

@@ -1,4 +1,5 @@
 import { AppLayout } from "components/AppLayout";
+import { Icon } from "components/Ico";
 import { PageSelector } from "components/Inputs/PageSelector";
 import { Switch } from "components/Inputs/Switch";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
@@ -61,7 +62,7 @@ export default function Videos(props: Props): JSX.Element {
       />
 
       <PanelHeader
-        icon="movie"
+        icon={Icon.Movie}
         title="Videos"
         description={langui.archives_description}
       />

src/pages/archives/videos/v/[uid].tsx

@@ -1,5 +1,6 @@
 import { AppLayout } from "components/AppLayout";
 import { HorizontalLine } from "components/HorizontalLine";
+import { Ico, Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { InsetBox } from "components/InsetBox";
 import { NavOption } from "components/PanelComponents/NavOption";
@@ -107,24 +108,27 @@ export default function Video(props: Props): JSX.Element {
             <h1 className="text-2xl">{video.title}</h1>
             <div className="flex w-full flex-row flex-wrap gap-x-6">
               <p>
-                <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+                <Ico
-                  event
+                  icon={Icon.Event}
-                </span>
+                  className="mr-1 translate-y-[.15em] !text-base"
+                />
                 {prettyDate(video.published_date)}
               </p>
               <p>
-                <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+                <Ico
-                  visibility
+                  icon={Icon.Visibility}
-                </span>
+                  className="mr-1 translate-y-[.15em] !text-base"
+                />
                 {isMobile
                   ? prettyShortenNumber(video.views)
                   : video.views.toLocaleString()}
               </p>
               {video.channel?.data?.attributes && (
                 <p>
-                  <span className="material-icons mr-1 translate-y-[.15em] !text-base">
+                  <Ico
-                    thumb_up
+                    icon={Icon.ThumbUp}
-                  </span>
+                    className="mr-1 translate-y-[.15em] !text-base"
+                  />
                   {isMobile
                     ? prettyShortenNumber(video.likes)
                     : video.likes.toLocaleString()}
@@ -135,7 +139,10 @@ export default function Video(props: Props): JSX.Element {
                 target="_blank"
                 rel="noreferrer"
               >
-                <Button className="!py-0 !px-3">{`${langui.view_on} ${video.source}`}</Button>
+                <Button
+                  className="!py-0 !px-3"
+                  text={`${langui.view_on} ${video.source}`}
+                />
               </a>
             </div>
           </div>
@@ -148,10 +155,8 @@ export default function Video(props: Props): JSX.Element {
               <div>
                 <Button
                   href={`/archives/videos/c/${video.channel.data.attributes.uid}`}
-                >
+                  text={video.channel.data.attributes.title}
-                  <h3>{video.channel.data.attributes.title}</h3>
+                />
-                </Button>
-
                 <p>
                   {`${video.channel.data.attributes.subscribers.toLocaleString()}
                    ${langui.subscribers?.toLowerCase()}`}

src/pages/chronicles/index.tsx

@@ -4,6 +4,7 @@ import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
@@ -12,7 +13,7 @@ export default function Chronicles(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="watch_later"
+        icon={Icon.WatchLater}
         title={langui.chronicles}
         description={langui.chronicles_description}
       />

src/pages/contents/index.tsx

@@ -16,6 +16,7 @@ import { prettyinlineTitle, prettySlug } from "helpers/formatters";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {
   contents: NonNullable<GetContentsQuery["contents"]>["data"];
@@ -65,7 +66,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="workspaces"
+        icon={Icon.Workspaces}
         title={langui.contents}
         description={langui.contents_description}
       />
@@ -202,7 +203,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
       navTitle={langui.contents}
       subPanel={subPanel}
       contentPanel={contentPanel}
-      subPanelIcon="search"
+      subPanelIcon={Icon.Search}
       {...props}
     />
   );

src/pages/dev/checkup/contents.tsx

@@ -44,16 +44,14 @@ export default function CheckupContents(props: Immutable<Props>): JSX.Element {
             href={line.frontendUrl}
             target="_blank"
             className="w-4 text-xs"
-          >
+            text="F"
-            F
+          />
-          </Button>
           <Button
             href={line.backendUrl}
             target="_blank"
             className="w-4 text-xs"
-          >
+            text="B"
-            B
+          />
-          </Button>
           <p>{line.subitems.join(" -> ")}</p>
           <p>{line.name}</p>
           <Chip>{line.type}</Chip>

src/pages/dev/checkup/libraryitems.tsx

@@ -49,16 +49,14 @@ export default function CheckupLibraryItems(
             href={line.frontendUrl}
             target="_blank"
             className="w-4 text-xs"
-          >
+            text="F"
-            F
+          />
-          </Button>
           <Button
             href={line.backendUrl}
             target="_blank"
             className="w-4 text-xs"
-          >
+            text="B"
-            B
+          />
-          </Button>
           <p>{line.subitems.join(" -> ")}</p>
           <p>{line.name}</p>
           <Chip>{line.type}</Chip>

src/pages/dev/editor.tsx

@@ -12,6 +12,7 @@ import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { useCallback, useState } from "react";
 import TurndownService from "turndown";
+import { Ico, Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
@@ -87,10 +88,7 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               <p>
                 Use this to create dialogues and transcripts. You can then add
                 transcript speech line within (
-                <span className="material-icons text-xs">
+                <Ico className="text-xs" icon={Icon.RecordVoiceOver} />)
-                  record_voice_over
-                </span>
-                )
               </p>
             </>
           }
@@ -110,9 +108,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.QuestionAnswer}
-            <span className="material-icons">question_answer</span>
+          />
-          </Button>
         </ToolTip>
         <ToolTip
           placement="bottom"
@@ -142,9 +139,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.RecordVoiceOver}
-            <span className="material-icons">record_voice_over</span>
+          />
-          </Button>
         </ToolTip>
         <ToolTip
           placement="bottom"
@@ -165,9 +161,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.DensityLarge}
-            <span className="material-icons">density_large</span>
+          />
-          </Button>
         </ToolTip>
 
         <ToolTip
@@ -189,9 +184,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.CheckBoxOutlineBlank}
-            <span className="material-icons">check_box_outline_blank</span>
+          />
-          </Button>
         </ToolTip>
         <ToolTip
           placement="bottom"
@@ -212,9 +206,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.MoreHoriz}
-            <span className="material-icons">more_horiz</span>
+          />
-          </Button>
         </ToolTip>
         <ToolTip
           content={
@@ -247,9 +240,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
                     );
                     handleInput(textarea.value);
                   }}
-                >
+                  icon={Icon.Link}
-                  <span className="material-icons">link</span>
+                />
-                </Button>
               </ToolTip>
               <ToolTip
                 placement="right"
@@ -278,18 +270,14 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
                     );
                     handleInput(textarea.value);
                   }}
-                >
+                  icon={Icon.Link}
-                  <p className="flex place-items-center gap-1">
+                  text="+ target"
-                    <span className="material-icons">link</span>+ target
+                />
-                  </p>
-                </Button>
               </ToolTip>
             </div>
           }
         >
-          <Button>
+          <Button icon={Icon.Link} />
-            <span className="material-icons">link</span>
-          </Button>
         </ToolTip>
 
         <ToolTip
@@ -311,9 +299,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
               );
               handleInput(textarea.value);
             }}
-          >
+            icon={Icon.Person}
-            <span className="material-icons">person</span>
+          />
-          </Button>
         </ToolTip>
 
         <ToolTip
@@ -324,9 +311,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
             onClick={() => {
               setConverterOpened(true);
             }}
-          >
+            icon={Icon.Html}
-            <span className="material-icons">html</span>
+          />
-          </Button>
         </ToolTip>
       </div>
 

src/pages/library/[slug]/index.tsx

@@ -157,13 +157,12 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
                 <p>{langui.subitem_of}</p>
                 <Button
                   href={`/library/${item.subitem_of.data[0].attributes.slug}`}
-                >
+                  text={prettyinlineTitle(
-                  {prettyinlineTitle(
                     "",
                     item.subitem_of.data[0].attributes.title,
                     item.subitem_of.data[0].attributes.subtitle
                   )}
-                </Button>
+                />
               </div>
             )}
             <div className="grid place-items-center">
@@ -188,9 +187,11 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
                     {item.urls.map((url, index) => (
                       <Fragment key={index}>
                         {url?.url && (
-                          <Button href={url.url} target={"_blank"}>
+                          <Button
-                            {prettyURL(url.url)}
+                            href={url.url}
-                          </Button>
+                            target={"_blank"}
+                            text={prettyURL(url.url)}
+                          />
                         )}
                       </Fragment>
                     ))}
@@ -437,9 +438,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
           <div id="contents" className="grid w-full place-items-center gap-8">
             <h2 className="-mb-6 text-2xl">{langui.contents}</h2>
             {displayOpenScans && (
-              <Button href={`/library/${item.slug}/scans`}>
+              <Button href={`/library/${item.slug}/scans`} text={langui.view_scans}/>
-                {langui.view_scans}
-              </Button>
             )}
             <div className="grid w-full gap-4">
               {item.contents.data.map((content) => (

src/pages/library/index.tsx

@@ -21,6 +21,7 @@ import { convertPrice } from "helpers/numbers";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {
   items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@@ -86,7 +87,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="library_books"
+        icon={Icon.LibraryBooks}
         title={langui.library}
         description={langui.library_description}
       />
@@ -219,7 +220,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
       navTitle={langui.library}
       subPanel={subPanel}
       contentPanel={contentPanel}
-      subPanelIcon="search"
+      subPanelIcon={Icon.Search}
       {...props}
     />
   );

src/pages/merch/index.tsx

@@ -4,6 +4,7 @@ import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 export default function Merch(props: Immutable<Props>): JSX.Element {
@@ -11,7 +12,7 @@ export default function Merch(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="store"
+        icon={Icon.Store}
         title={langui.merch}
         description={langui.merch_description}
       />

src/pages/news/index.tsx

@@ -14,6 +14,7 @@ import { prettyDate, prettySlug } from "helpers/formatters";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useState } from "react";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {
   posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
@@ -28,7 +29,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="feed"
+        icon={Icon.Feed}
         title={langui.news}
         description={langui.news_description}
       />

src/pages/wiki/index.tsx

@@ -5,6 +5,7 @@ import { SubPanel } from "components/Panels/SubPanel";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { Immutable } from "helpers/types";
 import { GetStaticPropsContext } from "next";
+import { Icon } from "components/Ico";
 
 interface Props extends AppStaticProps {}
 
@@ -13,7 +14,7 @@ export default function Wiki(props: Immutable<Props>): JSX.Element {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon="travel_explore"
+        icon={Icon.TravelExplore}
         title={langui.wiki}
         description={langui.wiki_description}
       />