Remove Font Awesome and replace with Material Design icons

frontend/index.html

@@ -11,7 +11,7 @@
         <div id="login-form" class="auth-container">
             <div class="auth-card fade-in">
                 <div class="auth-header">
-                  <h2><i class="fas fa-sign-in-alt"></i>Добро пожаловать!</h2>
+                    <h2><span class="material-symbols filled large">login</span> Добро пожаловать!</h2>
                     <p>Войдите в свой аккаунт</p>
                 </div>
                 <div class="auth-body">
@@ -40,7 +40,7 @@
         <div id="register-form" class="auth-container" style="display: none;">
             <div class="auth-card fade-in">
                 <div class="auth-header">
-                  <h2><i class="fas fa-user-plus"></i> Регистрация</h2>
+                    <h2><span class="material-symbols filled large">person_add</span> Регистрация</h2>
                     <p>Создайте новый аккаунт</p>
                 </div>
                 <div class="auth-body">
@@ -85,7 +85,7 @@
                     <ul class="nav-links">
                         <li>
                             <a href="#" id="chat-link">
-                            <i class="fas fa-comment-alt"></i> Общий чат
+                                <span class="material-symbols filled">chat_bubble</span> Общий чат
                             </a>
                         </li>
                         <li>
@@ -115,7 +115,7 @@
                         <form class="input-group" id="message-form">
                             <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
                             <button type="submit" class="send-btn">
-                              <i class="fas fa-paper-plane"></i>
+                                <span class="material-symbols filled">send</span>
                             </button>
                         </form>
                     </div>

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;