Refactor breadcrumb title setting and update icons in navigation components

jambotron-ui/src/app/main-module/main.component/main.component.html

@@ -39,7 +39,7 @@
   <button mat-raised-button (click)="openDialog('100ms', '5ms')" >
 <!--    <i antIcon type="bell" theme="outline"></i>-->
 <!--    <mat-icon>login</mat-icon>-->
-    Login
+    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>
   </button>
   }
   @if (isLoggedIn) {
@@ -48,7 +48,8 @@
     {{ username }}
   </button>
     <button mat-raised-button (click)="logout()">
-          <mat-icon>logout</mat-icon>
+
+            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>
       Logout
     </button>
 

jambotron-ui/src/app/main-module/main.component/main.component.scss

@@ -13,3 +13,8 @@ mat-toolbar{
   left: 0;
   z-index: 1000; // Ensure toolbar stays above other content
 }
+.mat-mdc-raised-button:not(:disabled){
+  color: rgba(24, 255, 255, 0.96);
+  background-color: rgba(24,255,255,0.04);
+}
+

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -7,13 +7,21 @@ import {BreadcrumbComponent} from '../../components/breadcrumb/breadcrumb.compon
 import {NavBarComponent} from '../../layouts/admin-layout/nav-bar/nav-bar.component';
 import {MatToolbar} from '@angular/material/toolbar';
 import {MatButton} from '@angular/material/button';
-import {IconDirective} from '@ant-design/icons-angular';
+import {IconDirective, IconService} from '@ant-design/icons-angular';
 import {MatDialog} from '@angular/material/dialog';
 import {Subscription} from 'rxjs';
 import {TokenStorageService} from '../../services/token-storage.service';
 import {AuthService} from '../../services/auth.service';
 import {EventBusService} from '../../_shared/event-bus.service';
 import {DialogComponent} from '../../components/dialog/dialog.component';
+import {
+  ArrowRightOutline, BellOutline,
+  CheckCircleOutline, CommentOutline, EditOutline,
+  GiftOutline, GithubOutline, LockOutline, LogoutOutline,
+  MessageOutline,
+  PhoneOutline, ProfileOutline, QuestionCircleOutline,
+  SettingOutline, UnorderedListOutline, UserOutline, WalletOutline
+} from '@ant-design/icons-angular/icons';
 
 @Component({
   selector: 'app-main.component',
@@ -51,9 +59,32 @@ export class MainComponent implements OnInit{
   private storageService: TokenStorageService = inject(TokenStorageService);
   private authService: AuthService = inject(AuthService);
   private eventBusService: EventBusService = inject(EventBusService);
+  private iconService = inject(IconService);
+
+
 
   constructor(private router: Router) {
-
+    this.iconService.addIcon(
+      ...[
+        CheckCircleOutline,
+        GiftOutline,
+        MessageOutline,
+        SettingOutline,
+        PhoneOutline,
+        LogoutOutline,
+        UserOutline,
+        EditOutline,
+        ProfileOutline,
+        QuestionCircleOutline,
+        LockOutline,
+        CommentOutline,
+        UnorderedListOutline,
+        ArrowRightOutline,
+        BellOutline,
+        GithubOutline,
+        WalletOutline
+      ]
+    );
   }
   goToHome() {
     this.router.navigate(['main/home']);