feat: migrate to Material Symbols

Material Icons has been deprecated, migration to Material Symbols is the best option
Vanilla-OS · Sep 1, 2024 · b8a7c1b · b8a7c1b
1 parent 7011823
commit b8a7c1b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 25 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -15,13 +15,13 @@
             <input class="flex-1 px-4 py-2 text-gray-600 dark:text-gray-300 bg-transparent focus:outline-none w-full"
               type="text" placeholder="Search for articles.." v-model="search" @input="searchArticles"
               @blur="emptySearch()">
-            <i class="material-icons p-2 text-gray-400 dark:text-gray-500">search</i>
+            <i class="material-symbols-outlined p-2 text-gray-400 dark:text-gray-500">search</i>
 
             <div v-if="collectionShortName" class="relative border-l border-gray-200 dark:border-gray-600">
               <button @click="showLangs = !showLangs"
                 class="flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
                 <span>{{ chronosStore.prefLang }}</span>
-                <i class="material-icons">arrow_drop_down</i>
+                <i class="material-symbols-outlined">arrow_drop_down</i>
               </button>
             </div>
           </div>
@@ -41,7 +41,7 @@
             <span class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
               v-for="(result, index) in searchResponse" :key="index" @mousedown.prevent="goToArticle(result.Slug)">
               <div class="flex items-center space-x-2">
-                <i class="mdi material-icons text-gray-500 dark:text-gray-400">book</i>
+                <i class="mdi material-symbols-outlined text-gray-500 dark:text-gray-400">book</i>
                 <div class="flex-1">
                   <p class="font-semibold text-gray-900 dark:text-gray-100">
                     {{ result.Title }}
@@ -57,9 +57,9 @@
 
         <button @click="toggleThemeMode"
           class="flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-          <i class="material-icons" v-if="theme === 'light'">light_mode</i>
-          <i class="material-icons" v-if="theme === 'system'">computer</i>
-          <i class="material-icons" v-if="theme === 'dark'">dark_mode</i>
+          <i class="material-symbols-outlined" v-if="theme === 'light'">light_mode</i>
+          <i class="material-symbols-outlined" v-if="theme === 'system'">computer</i>
+          <i class="material-symbols-outlined" v-if="theme === 'dark'">dark_mode</i>
         </button>
 
         <div class="hidden sm:flex items-center space-x-4">

diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css
@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0');
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
diff --git a/src/components/CustomSelect.vue b/src/components/CustomSelect.vue
@@ -12,14 +12,14 @@
                 <li v-for="option in filteredOptions" :key="option" @click="selectOption(option)"
                     class="cursor-pointer select-none p-2 hover:bg-blue-100 dark:hover:bg-gray-700 dark:text-gray-200">
                     {{ option }}
-                    <span v-if="modelValue.includes(option)" class="material-icons text-sm dark:text-gray-200">check</span>
+                    <span v-if="modelValue.includes(option)" class="material-symbols-outlined text-sm dark:text-gray-200">check</span>
                 </li>
             </ul>
             <div v-if="modelValue.length !== 0" class="p-2 flex flex-wrap gap-2 flex-col dark:bg-gray-600">
                 <span v-for="tag in modelValue" :key="tag"
                     class="bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200 rounded-full px-3 py-1 text-xs font-medium flex items-center flex-1 mr-2">
                     {{ tag }}
-                    <i class="material-icons text-sm cursor-pointer ml-auto dark:text-gray-200"
+                    <i class="material-symbols-outlined text-sm cursor-pointer ml-auto dark:text-gray-200"
                         @click.stop="removeTag(tag)">cancel</i>
                 </span>
             </div>
@@ -124,4 +124,3 @@ export default defineComponent({
     },
 });
 </script>
-
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
@@ -8,23 +8,23 @@
                         class="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400 dark:text-blue-400">Home</router-link>
                 </li>
                 <li>
-                    <span class="material-icons text-gray-500 dark:text-gray-300">chevron_right</span>
+                    <span class="material-symbols-outlined text-gray-500 dark:text-gray-300">chevron_right</span>
                 </li>
                 <li v-if="collectionName">
                     <router-link :to="{ name: 'collection', params: { collection: collectionName } }"
                         class="text-blue-600 hover:text-blue-800 dark:hover:text-blue-400 dark:text-blue-400">{{
                         collectionName }}</router-link>
                 </li>
                 <li v-if="collectionName">
-                    <span class="material-icons text-gray-500 dark:text-gray-300">chevron_right</span>
+                    <span class="material-symbols-outlined text-gray-500 dark:text-gray-300">chevron_right</span>
                 </li>
                 <li>
                     <a class="cursor-pointer text-gray-600 dark:text-gray-400">{{
                         lang
                         }}</a>
                 </li>
                 <li v-if="article.Title" class="hidden md:flex">
-                    <span class="material-icons text-gray-500 dark:text-gray-300">chevron_right</span>
+                    <span class="material-symbols-outlined text-gray-500 dark:text-gray-300">chevron_right</span>
                 </li>
                 <li class="text-gray-500 dark:text-gray-300 hidden md:flex" aria-current="page" v-if="article.Title">
                     {{ article.Title }}
@@ -52,7 +52,7 @@
             <div class="flex flex-row justify-center mt-2 align-middle">
                 <p class="mt-4 text-gray-700 dark:text-gray-400"><b>Reading time:</b> {{ readingTime }} <span class="print:hidden">&middot;</span></p>
                 <div class="px-6 py-3.5 inline-flex justify-center align-middle cursor-pointer print:hidden" @click="printArticle">
-                    <span class="toolBox-item-icon mdi material-icons -ml-4">print</span>
+                    <span class="toolBox-item-icon mdi material-symbols-outlined -ml-4">print</span>
                 </div>
             </div>
         </div>
@@ -86,7 +86,7 @@
                     <router-link v-if="previousArticle && previousArticle.Slug !== undefined"
                         :to="`/${collectionName}/${chronosStore.prefLang}/${previousArticle.Slug}`"
                         class="flex justify-between items-center border border-gray-300 rounded-lg p-4 gap-4">
-                        <span class="material-icons">arrow_back</span>
+                        <span class="material-symbols-outlined">arrow_back</span>
                         <div class="flex flex-col">
                             <span class="mr-2 text-gray-700 dark:text-gray-300 text-right">Previous</span>
                             <span class="mr-2 text-gray-700 dark:text-gray-300 text-right font-semibold text-lg">
@@ -105,15 +105,15 @@
                                 {{ nextArticle.Title }}
                             </span>
                         </div>
-                        <span class="material-icons">arrow_forward</span>
+                        <span class="material-symbols-outlined">arrow_forward</span>
                     </router-link>
                 </div>
             </div>
         </div>
     </div>
 
     <button @click="isSidebarVisible = !isSidebarVisible"
-        class="material-icons fixed bottom-4 right-4 bg-blue-600 text-white p-4 rounded-full z-50 md:hidden print:hidden">
+        class="material-symbols-outlined fixed bottom-4 right-4 bg-blue-600 text-white p-4 rounded-full z-50 md:hidden print:hidden">
         menu
     </button>
 
@@ -408,17 +408,17 @@ export default defineComponent({
                 const iconStyle = "p-0 m-0 text-lg leading-none";
                 button.className = "bg-blue-500 text-white p-[6px] rounded absolute right-2 top-2 opacity-0 transition-opacity size-fit flex items-center justify-center";
                 button.type = "button";
-                button.innerHTML = `<span class="material-icons ${iconStyle}">content_copy</span>`;
+                button.innerHTML = `<span class="material-symbols-outlined ${iconStyle}">content_copy</span>`;
 
                 button.addEventListener("click", () => {
                     if (pre.textContent !== null) {
                         navigator.clipboard.writeText(pre.textContent);
                     }
                     button.classList.add("bg-green-600");
-                    button.innerHTML = `<span class="material-icons ${iconStyle}">done</span>`;
+                    button.innerHTML = `<span class="material-symbols-outlined ${iconStyle}">done</span>`;
                     setTimeout(() => {
                         button.classList.remove("bg-green-600");
-                        button.innerHTML = `<span class="material-icons ${iconStyle}">content_copy</span>`;
+                        button.innerHTML = `<span class="material-symbols-outlined ${iconStyle}">content_copy</span>`;
                     }, 2000);
                 });
 

diff --git a/src/views/CollectionView.vue b/src/views/CollectionView.vue
@@ -25,7 +25,7 @@
             <span
               class="inline-flex items-center text-lg text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold transition-colors duration-150 ease-in-out">
               Start reading
-              <i class="material-icons ml-2">arrow_forward</i>
+              <i class="material-symbols-outlined ml-2">arrow_forward</i>
             </span>
           </div>
         </router-link>
@@ -36,7 +36,7 @@
     <aside
       class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow md:sticky top-2 flex flex-row gap-4 mt-2 items-center">
       <router-link class="text-blue-600 dark:text-blue-400 flex items-center mr-auto" to="/">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-symbols-outlined">arrow_back</i>
         <span class="hidden sm:inline">Back to collections</span>
       </router-link>
 
@@ -77,7 +77,7 @@
           <router-link :to="`/${collectionName}/${chronosStore.prefLang}/${article.Slug}`"
             class="mt-auto inline-flex items-center text-lg text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold transition-colors duration-150 ease-in-out">
             Read the article
-            <i class="material-icons ml-2">arrow_forward</i>
+            <i class="material-symbols-outlined ml-2">arrow_forward</i>
           </router-link>
         </article>
       </div>

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -20,7 +20,7 @@
             <div
               class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-semibold text-sm transition-colors duration-150 ease-in-out mb-4">
               <span class="flex items-center">
-                <i class="material-icons text-base mr-2">book</i>
+                <i class="material-symbols-outlined text-base mr-2">book</i>
                 <span v-if="articleCounts[collection.shortName] !== undefined">
                   {{ articleCounts[collection.shortName] }} Articles
                 </span>
@@ -31,7 +31,7 @@
               <span
                 class="inline-flex items-center text-lg text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-semibold transition-colors duration-150 ease-in-out">
                 View collection
-                <i class="material-icons ml-2">arrow_forward</i>
+                <i class="material-symbols-outlined ml-2">arrow_forward</i>
               </span>
             </div>
           </router-link>