Merge pull request #2110 from numbersprotocol/fix-tab-bar-icons-load-performance

fix tab bar icons load speed

Author: bafu

src/app/app.component.ts

@@ -114,6 +114,9 @@ export class AppComponent {
       'capture-rebrand-arrow-left',
       'capture-rebrand-share',
       'capture-rebrand-more-horiz',
+      'capture',
+      'profile',
+      'search',
     ];
 
     for (const iconName of captureRebrandedIconNames) {

src/app/features/home/home.page.html

@@ -92,46 +92,44 @@
         <mat-tab>
           <ng-template mat-tab-label>
             <button mat-icon-button (click)="navigateToExploreTab()">
-              <ion-icon
-                src="/assets/images/icons/search.svg"
+              <mat-icon
+                svgIcon="search"
                 class="tab-action-button-icon"
                 joyrideStep="highlightHomeTab"
                 title="Home Tab"
                 text="View created captures"
-              ></ion-icon>
+              ></mat-icon>
             </button>
           </ng-template>
           <app-explore-tab></app-explore-tab>
         </mat-tab>
         <mat-tab disabled>
           <ng-template mat-tab-label>
             <button mat-icon-button (click)="captureWithCustomCamera()">
-              <ion-icon
-                src="/assets/images/icons/capture.svg"
+              <mat-icon
+                svgIcon="capture"
                 class="tab-action-button-icon"
                 joyrideStep="highlightCaptureButton"
                 [title]="t('userGuide.capture')"
                 [text]="
                   t('userGuide.createCapturesByTakingPhotosOrRecordingVideos')
                 "
-              >
-                camera_alt
-              </ion-icon>
+              ></mat-icon>
             </button>
           </ng-template>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <button mat-icon-button (click)="navigateToInboxTab()">
-              <ion-icon
-                src="/assets/images/icons/profile.svg"
+              <mat-icon
+                svgIcon="profile"
                 class="tab-action-button-icon"
                 joyrideStep="highlightInboxTab"
                 [title]="t('userGuide.inboxTab')"
                 [text]="
                   t('userGuide.visitInboxForPurchasedItemsAndGiftsReceived')
                 "
-              ></ion-icon>
+              ></mat-icon>
             </button>
           </ng-template>
           <app-capture-tab></app-capture-tab>