Remove Font Awesome and replace with Material Design icons

frontend/src/css/_auth.scss

@@ -31,6 +31,11 @@
         h2 {
             font-size: 1.8rem;
             margin-bottom: 0.5rem;
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            justify-content: center;
         }
     }
       

frontend/src/css/_chat.scss

@@ -43,6 +43,10 @@
                         transition: all 0.3s ease;
                         padding: 0.5rem 1rem;
                         border-radius: 4px;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        gap: 10px;
 
                         &:hover {
                             background-color: rgba(255, 255, 255, 0.2);

frontend/src/css/lib/fonts/material-symbols.scss

@@ -0,0 +1,60 @@
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/webfonts/material-symbols.woff2) format('woff2');
+}
+
+.material-symbols {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+
+    $normal-size: 24;
+    $large-size: 30;
+
+    &.outlined {
+        font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' $normal-size;
+
+        &.large {
+            font-size: #{$large-size}px;
+            font-variation-settings:
+            'FILL' 0,
+            'wght' 400,
+            'GRAD' 0,
+            'opsz' $large-size;
+        }
+    }
+
+    &.filled {
+        font-variation-settings:
+        'FILL' 1,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' $normal-size;
+
+        &.large {
+            font-size: #{$large-size}px;
+            font-variation-settings:
+            'FILL' 1,
+            'wght' 400,
+            'GRAD' 0,
+            'opsz' $large-size;
+        }
+    }
+}

frontend/src/css/style.scss

@@ -5,7 +5,7 @@
 @use "common/colors" as *;
 
 @use "lib/fonts/montserrat";
-@use "lib/font-awesome.min.css";
+@use "lib/fonts/material-symbols";
 
 * {
     margin: 0;