diff --git a/src/index.html b/src/index.html
index 9a5b8d3..1274b78 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Web app for keeping track of anything you want to count.">
     <title>NCounter</title>
-    ${require('./icon/html_code.html')}
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="manifest" href="icons/site.webmanifest">
+    <link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#3a86b7">
+    <link rel="shortcut icon" href="icons/favicon.ico">
+    <meta name="msapplication-TileColor" content="#dce6ef"> 
+    <meta name="msapplication-config" content="icons/browserconfig.xml">
+    <meta name="theme-color" content="#dce6ef">
   </head>
   <body>
     <noscript>
diff --git a/src/ncounter/About.svelte b/src/ncounter/About.svelte
index 3818b11..82eaad9 100644
--- a/src/ncounter/About.svelte
+++ b/src/ncounter/About.svelte
@@ -1,5 +1,5 @@
 <div class="about">
-    <button class="close" on:click={ () => { dispatch('close'); } }><i class="material-icons">close</i></button>
+    <button class="close" on:click={ () => { dispatch('close'); } }><span class="material-symbols-outlined">close</span></button>
     <header>
         <h1>NCounter</h1>
         <h2>Release |BUILD_DATE|</h2>
diff --git a/src/ncounter/App.svelte b/src/ncounter/App.svelte
index 1c9f4be..87fe8f9 100644
--- a/src/ncounter/App.svelte
+++ b/src/ncounter/App.svelte
@@ -10,10 +10,10 @@
     </div>
     {/if}
     <div class="tool-bar">
-        <button class="add" on:click="{ showAdd }"><i class="material-icons">add</i></button>
+        <button class="add" on:click="{ showAdd }"><span class="material-symbols-outlined">add</span></button>
         {#if updateAvailable}<button class="update"
             class:animate="{!ignoreUpdate}"
-            on:click={() => { ignoreUpdate = true; showUpdateMessage = !showUpdateMessage; }}><i class="material-icons">arrow_upward</i></button>{/if}
+            on:click={() => { ignoreUpdate = true; showUpdateMessage = !showUpdateMessage; }}><span class="material-symbols-outlined">arrow_upward</span></button>{/if}
         <button class="about" on:click="{ () => { showAbout = true; } }">?</button>
     </div>
 </div>
diff --git a/src/ncounter/Counter.svelte b/src/ncounter/Counter.svelte
index ded3176..f4fe74b 100644
--- a/src/ncounter/Counter.svelte
+++ b/src/ncounter/Counter.svelte
@@ -5,14 +5,14 @@
     <MyProgress value={ counter.value } max={ counter.max }></MyProgress>
     {/if}
     <div class="controls">
-        <button on:click={ () => { showIncrement = true; } }><i class="material-icons">add</i></button>
-        <button on:click={ () => { showSet = true; } }><i class="material-icons">edit</i></button>
-        <button class="reset" on:click={ reset }><i class="material-icons">replay</i></button>
+        <button on:click={ () => { showIncrement = true; } }><span class="material-symbols-outlined">add</span></button>
+        <button on:click={ () => { showSet = true; } }><span class="material-symbols-outlined">edit</span></button>
+        <button class="reset" on:click={ reset }><span class="material-symbols-outlined">replay</span></button>
         {#if counter.saveHistory}
-        <button class="history" on:click={ () => { showHistory = true; } }><i class="material-icons">show_chart</i></button>
+        <button class="history" on:click={ () => { showHistory = true; } }><span class="material-symbols-outlined">show_chart</span></button>
         {/if}
-        <button on:click={ startEdit }><i class="material-icons">settings</i></button>
-        <button on:click={ remove }><i class="material-icons">delete</i></button>
+        <button on:click={ startEdit }><span class="material-symbols-outlined">settings</span></button>
+        <button on:click={ remove }><span class="material-symbols-outlined">delete</span></button>
     </div>
     {#if showValueDialog}
     <div class="dialog">
@@ -40,14 +40,9 @@
         </form>
     </div>
     {/if}
-    {#if showHistory}
-    <History { counterId } on:close={ () => { showHistory = false; } }></History>
-    {/if}
 </div>
 <script>
 import MyProgress from './MyProgress.svelte';
-import History from './History.svelte';
-import { tick } from 'svelte';
 import { counters } from './db.js';
 
 export let counterId;
diff --git a/src/ncounter/History.svelte b/src/ncounter/History.svelte
index 41c1679..87d3bfd 100644
--- a/src/ncounter/History.svelte
+++ b/src/ncounter/History.svelte
@@ -1,7 +1,7 @@
 <div class="history-container">
     <header>
         <h1>{ counter.title }</h1>
-        <button class="close" on:click={ close }><i class="material-icons">close</i></button>
+        <button class="close" on:click={ close }><span class="material-symbols-outlined">close</span></button>
     </header>
     <canvas class="chart-container" bind:this={ chartEl } width="{ window.outerWidth }" height="250">
     </canvas>
diff --git a/webpack.common.js b/webpack.common.js
index 9a3de4a..08fc3f6 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,6 +1,5 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const GoogleFontsPlugin = require('@beyonk/google-fonts-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const LicensePlugin = require('webpack-license-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -20,30 +19,26 @@ module.exports = {
             excludeChunks: ['sw'],
             template: 'src/index.html'
         }),
-        new GoogleFontsPlugin({
-            fonts: [
-                { family: "Material Icons" }
-            ],
-            local: false
-        }),
         new LicensePlugin(),
-        new CopyWebpackPlugin([
-            {
-                from: 'src/icon/*.png', to: 'icons', flatten: true
-            },
-            {
-                from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
-            },
-            {
-                from: 'src/icon/favicon.ico', to: 'icons'
-            },
-            {
-                from: 'src/icon/site.webmanifest', to: 'icons'
-            },
-            {
-                from: 'src/icon/browserconfig.xml', to: 'icons'
-            }
-        ])
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: 'src/icon/*.png', to: path.resolve(__dirname, 'dist', 'icons', '[name][ext]')
+                },
+                {
+                    from: 'src/icon/safari-pinned-tab.svg', to: 'icons'
+                },
+                {
+                    from: 'src/icon/favicon.ico', to: 'icons'
+                },
+                {
+                    from: 'src/icon/site.webmanifest', to: 'icons'
+                },
+                {
+                    from: 'src/icon/browserconfig.xml', to: 'icons'
+                }
+            ]
+        })
     ],
     output: {
         filename: '[name].js',
@@ -51,13 +46,6 @@ module.exports = {
     },
     module: {
         rules: [
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                options: {
-                    interpolate: true
-                }
-            },
             {
                 test: /\.svelte$/,
                 exclude: /node_modules/,
@@ -87,4 +75,7 @@ module.exports = {
             }
         ]
     },
+    resolve: {
+      conditionNames: ['svelte']  
+    },
 }
\ No newline at end of file
