Remove closing tags (#2816)

apps/client/src/app/app.component.html

@@ -96,8 +96,8 @@
               href="https://status.ghostfol.io"
               target="_blank"
               title="Ghostfolio Status"
-              >Status<ion-icon class="ml-1" name="open-outline"></ion-icon
+              >Status<ion-icon class="ml-1" name="open-outline"
-            ></a>
+            /></a>
           </li>
         </ul>
       </div>
@@ -110,8 +110,8 @@
               href="https://github.com/ghostfolio/ghostfolio"
               target="_blank"
               title="Find Ghostfolio on GitHub"
-              >GitHub<ion-icon class="ml-1" name="open-outline"></ion-icon
+              >GitHub<ion-icon class="ml-1" name="open-outline"
-            ></a>
+            /></a>
           </li>
           <li>
             <a
@@ -119,8 +119,8 @@
               href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
               target="_blank"
               title="Join the Ghostfolio Slack community"
-              >Slack<ion-icon class="ml-1" name="open-outline"></ion-icon
+              >Slack<ion-icon class="ml-1" name="open-outline"
-            ></a>
+            /></a>
           </li>
           <li>
             <a
@@ -128,11 +128,8 @@
               href="https://twitter.com/ghostfolio_"
               target="_blank"
               title="Follow Ghostfolio on X (formerly Twitter)"
-              >X (formerly Twitter)<ion-icon
+              >X (formerly Twitter)<ion-icon class="ml-1" name="open-outline"
-                class="ml-1"
+            /></a>
-                name="open-outline"
-              ></ion-icon
-            ></a>
           </li>
           <li>&nbsp;</li>
           <li>

apps/client/src/app/components/access-table/access-table.component.html

@@ -27,7 +27,7 @@
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
     <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
       <div *ngIf="element.type === 'PUBLIC'" class="align-items-center d-flex">
-        <ion-icon class="mr-1" name="link-outline"></ion-icon>
+        <ion-icon class="mr-1" name="link-outline" />
         <a
           href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
           target="_blank"
@@ -47,7 +47,7 @@
         [matMenuTriggerFor]="transactionMenu"
         (click)="$event.stopPropagation()"
       >
-        <ion-icon name="ellipsis-horizontal"></ion-icon>
+        <ion-icon name="ellipsis-horizontal" />
       </button>
       <mat-menu #transactionMenu="matMenu" xPosition="before">
         <button mat-menu-item (click)="onDeleteAccess(element.id)">

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -5,7 +5,7 @@
     [disabled]="dataSource?.data.length < 2"
     (click)="onTransferBalance()"
   >
-    <ion-icon class="mr-2" name="arrow-redo-outline"></ion-icon>
+    <ion-icon class="mr-2" name="arrow-redo-outline" />
     <ng-container i18n>Transfer Cash Balance</ng-container>...
   </button>
 </div>
@@ -19,7 +19,7 @@
     ></th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-center">
-        <ion-icon *ngIf="element.isExcluded" name="eye-off-outline"></ion-icon>
+        <ion-icon *ngIf="element.isExcluded" name="eye-off-outline" />
       </div>
     </td>
     <td
@@ -231,7 +231,7 @@
         title="Note"
         (click)="onOpenComment(element.comment); $event.stopPropagation()"
       >
-        <ion-icon name="document-text-outline"></ion-icon>
+        <ion-icon name="document-text-outline" />
       </button>
     </td>
     <td
@@ -250,12 +250,12 @@
         [matMenuTriggerFor]="accountMenu"
         (click)="$event.stopPropagation()"
       >
-        <ion-icon name="ellipsis-horizontal"></ion-icon>
+        <ion-icon name="ellipsis-horizontal" />
       </button>
       <mat-menu #accountMenu="matMenu" xPosition="before">
         <button mat-menu-item (click)="onUpdateAccount(element)">
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="create-outline"></ion-icon>
+            <ion-icon class="mr-2" name="create-outline" />
             <span i18n>Edit</span>
           </span>
         </button>
@@ -265,7 +265,7 @@
           (click)="onDeleteAccount(element.id)"
         >
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+            <ion-icon class="mr-2" name="trash-outline" />
             <span i18n>Delete</span>
           </span>
         </button>

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -90,33 +90,24 @@
             <ng-container i18n>Status</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 py-2" mat-cell>
-            <ion-icon
+            <ion-icon *ngIf="element.state === 'active'" name="play-outline" />
-              *ngIf="element.state === 'active'"
-              name="play-outline"
-            ></ion-icon>
             <ion-icon
               *ngIf="element.state === 'completed'"
               class="text-success"
               name="checkmark-circle-outline"
-            ></ion-icon>
+            />
             <ion-icon
               *ngIf="element.state === 'delayed'"
               name="time-outline"
               [ngClass]="{ 'text-danger': element.stacktrace?.length > 0 }"
-            ></ion-icon>
+            />
             <ion-icon
               *ngIf="element.state === 'failed'"
               class="text-danger"
               name="alert-circle-outline"
-            ></ion-icon>
+            />
-            <ion-icon
+            <ion-icon *ngIf="element.state === 'paused'" name="pause-outline" />
-              *ngIf="element.state === 'paused'"
+            <ion-icon *ngIf="element.state === 'waiting'" name="cafe-outline" />
-              name="pause-outline"
-            ></ion-icon>
-            <ion-icon
-              *ngIf="element.state === 'waiting'"
-              name="cafe-outline"
-            ></ion-icon>
           </td>
         </ng-container>
 
@@ -128,7 +119,7 @@
               [matMenuTriggerFor]="jobsActionsMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-vertical"></ion-icon>
+              <ion-icon name="ellipsis-vertical" />
             </button>
             <mat-menu #jobsActionsMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onDeleteJobs()">
@@ -143,7 +134,7 @@
               [matMenuTriggerFor]="jobActionsMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-horizontal"></ion-icon>
+              <ion-icon name="ellipsis-horizontal" />
             </button>
             <mat-menu #jobActionsMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onViewData(element.data)">

apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html

@@ -16,7 +16,7 @@
             class="text-muted"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
-          ></ion-icon>
+          />
         </mat-datepicker-toggle>
         <mat-datepicker #date disabled="true"></mat-datepicker>
       </mat-form-field>
@@ -38,7 +38,7 @@
         title="Fetch market price"
         (click)="onFetchSymbolForDate()"
       >
-        <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
+        <ion-icon class="text-muted" name="refresh-outline" />
       </button>
     </div>
   </div>

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -125,7 +125,7 @@
               *ngIf="element.comment"
               class="d-block"
               name="document-text-outline"
-            ></ion-icon>
+            />
           </td>
         </ng-container>
 
@@ -137,7 +137,7 @@
               [matMenuTriggerFor]="assetProfilesActionsMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-vertical"></ion-icon>
+              <ion-icon name="ellipsis-vertical" />
             </button>
             <mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onGather7Days()">
@@ -158,7 +158,7 @@
               [matMenuTriggerFor]="assetProfileActionsMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-horizontal"></ion-icon>
+              <ion-icon name="ellipsis-horizontal" />
             </button>
             <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
               <button
@@ -166,7 +166,7 @@
                 (click)="onOpenAssetProfileDialog({ dataSource: element.dataSource, symbol: element.symbol })"
               >
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="create-outline" />
                   <span i18n>Edit</span>
                 </span>
               </button>
@@ -176,7 +176,7 @@
                 (click)="onDeleteProfileData({dataSource: element.dataSource, symbol: element.symbol})"
               >
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="trash-outline" />
                   <span i18n>Delete</span>
                 </span>
               </button>
@@ -225,7 +225,7 @@
       [queryParams]="{ createAssetProfileDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large" />
     </a>
   </div>
 </div>

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -15,7 +15,7 @@
       [matMenuTriggerFor]="assetProfileActionsMenu"
       (click)="$event.stopPropagation()"
     >
-      <ion-icon name="ellipsis-vertical"></ion-icon>
+      <ion-icon name="ellipsis-vertical" />
     </button>
     <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
       <button mat-menu-item type="button" (click)="initialize()">

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -62,7 +62,7 @@
                       [matMenuTriggerFor]="exchangeRateActionsMenu"
                       (click)="$event.stopPropagation()"
                     >
-                      <ion-icon name="ellipsis-horizontal"></ion-icon>
+                      <ion-icon name="ellipsis-horizontal" />
                     </button>
                     <mat-menu
                       #exchangeRateActionsMenu="matMenu"
@@ -79,10 +79,7 @@
                         [routerLink]="['/admin', 'market-data']"
                       >
                         <span class="align-items-center d-flex">
-                          <ion-icon
+                          <ion-icon class="mr-2" name="create-outline" />
-                            class="mr-2"
-                            name="create-outline"
-                          ></ion-icon>
                           <span i18n>Edit</span>
                         </span>
                       </a>
@@ -92,10 +89,7 @@
                         (click)="onDeleteCurrency(exchangeRate.label2)"
                       >
                         <span class="align-items-center d-flex">
-                          <ion-icon
+                          <ion-icon class="mr-2" name="trash-outline" />
-                            class="mr-2"
-                            name="trash-outline"
-                          ></ion-icon>
                           <span i18n>Delete</span>
                         </span>
                       </button>
@@ -109,7 +103,7 @@
                   mat-flat-button
                   (click)="onAddCurrency()"
                 >
-                  <ion-icon class="mr-1" name="add-outline"></ion-icon>
+                  <ion-icon class="mr-1" name="add-outline" />
                   <span i18n>Add Currency</span>
                 </button>
               </div>
@@ -147,7 +141,7 @@
                   mat-button
                   (click)="onDeleteSystemMessage()"
                 >
-                  <ion-icon name="trash-outline"></ion-icon>
+                  <ion-icon name="trash-outline" />
                 </button>
               </div>
               <button
@@ -157,10 +151,7 @@
                 mat-flat-button
                 (click)="onSetSystemMessage()"
               >
-                <ion-icon
+                <ion-icon class="mr-1" name="information-circle-outline" />
-                  class="mr-1"
-                  name="information-circle-outline"
-                ></ion-icon>
                 <span i18n>Set Message</span>
               </button>
             </div>
@@ -182,7 +173,7 @@
                       [matMenuTriggerFor]="couponActionsMenu"
                       (click)="$event.stopPropagation()"
                     >
-                      <ion-icon name="ellipsis-horizontal"></ion-icon>
+                      <ion-icon name="ellipsis-horizontal" />
                     </button>
                     <mat-menu
                       #couponActionsMenu="matMenu"
@@ -194,10 +185,7 @@
                         (click)="onDeleteCoupon(coupon.code)"
                       >
                         <span class="align-items-center d-flex">
-                          <ion-icon
+                          <ion-icon class="mr-2" name="trash-outline" />
-                            class="mr-2"
-                            name="trash-outline"
-                          ></ion-icon>
                           <span i18n>Delete</span>
                         </span>
                       </button>
@@ -240,7 +228,7 @@
             <div class="w-50" i18n>Housekeeping</div>
             <div class="w-50">
               <button color="warn" mat-flat-button (click)="onFlushCache()">
-                <ion-icon class="mr-1" name="close-circle-outline"></ion-icon>
+                <ion-icon class="mr-1" name="close-circle-outline" />
                 <span i18n>Flush Cache</span>
               </button>
             </div>

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -82,18 +82,18 @@
               [matMenuTriggerFor]="platformMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-horizontal"></ion-icon>
+              <ion-icon name="ellipsis-horizontal" />
             </button>
             <mat-menu #platformMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onUpdatePlatform(element)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="create-outline" />
                   <span i18n>Edit</span>
                 </span>
               </button>
               <button mat-menu-item (click)="onDeletePlatform(element.id)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="trash-outline" />
                   <span i18n>Delete</span>
                 </span>
               </button>

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -62,18 +62,18 @@
               [matMenuTriggerFor]="tagMenu"
               (click)="$event.stopPropagation()"
             >
-              <ion-icon name="ellipsis-horizontal"></ion-icon>
+              <ion-icon name="ellipsis-horizontal" />
             </button>
             <mat-menu #tagMenu="matMenu" xPosition="before">
               <button mat-menu-item (click)="onUpdateTag(element)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="create-outline" />
                   <span i18n>Edit</span>
                 </span>
               </button>
               <button mat-menu-item (click)="onDeleteTag(element.id)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <ion-icon class="mr-2" name="trash-outline" />
                   <span i18n>Delete</span>
                 </span>
               </button>

apps/client/src/app/components/admin-users/admin-users.html

@@ -195,7 +195,7 @@
                 [matMenuTriggerFor]="userMenu"
                 (click)="$event.stopPropagation()"
               >
-                <ion-icon name="ellipsis-horizontal"></ion-icon>
+                <ion-icon name="ellipsis-horizontal" />
               </button>
               <mat-menu #userMenu="matMenu" xPosition="before">
                 <button
@@ -204,7 +204,7 @@
                   (click)="onImpersonateUser(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="contract-outline"></ion-icon>
+                    <ion-icon class="mr-2" name="contract-outline" />
                     <span i18n>Impersonate User</span>
                   </span>
                 </button>
@@ -214,7 +214,7 @@
                   (click)="onDeleteUser(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                    <ion-icon class="mr-2" name="trash-outline" />
                     <span i18n>Delete User</span>
                   </span>
                 </button>

apps/client/src/app/components/dialog-footer/dialog-footer.component.html

@@ -3,5 +3,5 @@
   mat-button
   (click)="onClickCloseButton()"
 >
-  <ion-icon name="close" size="large"></ion-icon>
+  <ion-icon name="close" size="large" />
 </button>

apps/client/src/app/components/dialog-header/dialog-header.component.html

@@ -9,5 +9,5 @@
   mat-button
   (click)="onClickCloseButton()"
 >
-  <ion-icon name="close" size="large"></ion-icon>
+  <ion-icon name="close" size="large" />
 </button>

apps/client/src/app/components/header/header.component.html

@@ -156,12 +156,12 @@
             class="d-none d-sm-block"
             name="person-circle-outline"
             size="large"
-          ></ion-icon>
+          />
           <ion-icon
             class="d-block d-sm-none"
             size="large"
             [name]="isMenuOpen ? 'close-outline' : 'menu-outline'"
-          ></ion-icon>
+          />
         </button>
         <mat-menu #accountMenu="matMenu" xPosition="before">
           <ng-container *ngIf="user?.access?.length > 0">
@@ -175,7 +175,7 @@
                       ? 'radio-button-off-outline'
                       : 'radio-button-on-outline'
                   "
-                ></ion-icon>
+                />
                 <span i18n>Me</span>
               </span>
             </button>
@@ -193,7 +193,7 @@
                       ? 'radio-button-on-outline'
                       : 'radio-button-off-outline'
                   "
-                ></ion-icon>
+                />
                 <span *ngIf="accessItem.alias">{{ accessItem.alias }}</span>
                 <span *ngIf="!accessItem.alias" i18n>User</span>
               </span>

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -23,7 +23,7 @@
         >
           <ion-icon
             [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'"
-          ></ion-icon>
+          />
         </button>
       </mat-form-field>
     </form>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -12,7 +12,7 @@
       <ion-icon
         *ngIf="errors?.length > 0 && !isLoading"
         name="alert-circle-outline"
-      ></ion-icon>
+      />
     </div>
     <div *ngIf="isLoading" class="align-items-center d-flex">
       <ngx-skeleton-loader

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -169,7 +169,7 @@
         *ngIf="hasPermissionToUpdateUserSettings && !isLoading"
         class="mr-1 text-muted"
         name="ellipsis-horizontal-circle-outline"
-      ></ion-icon>
+      />
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"

apps/client/src/app/components/position/position.component.html

@@ -65,7 +65,7 @@
           class="chevron text-muted"
           name="chevron-forward-outline"
           size="small"
-        ></ion-icon>
+        />
       </div>
     </a>
   </div>

apps/client/src/app/components/rule/rule.component.html

@@ -15,11 +15,8 @@
       class="align-items-center d-flex icon-container mr-2 px-2"
       [ngClass]="{ okay: rule?.value === true, warn: rule?.value === false }"
     >
-      <ion-icon
+      <ion-icon *ngIf="rule?.value === true" name="checkmark-circle-outline" />
-        *ngIf="rule?.value === true"
+      <ion-icon *ngIf="rule?.value === false" name="warning-outline" />
-        name="checkmark-circle-outline"
-      ></ion-icon>
-      <ion-icon *ngIf="rule?.value === false" name="warning-outline"></ion-icon>
     </div>
     <div *ngIf="isLoading" class="flex-grow-1">
       <ngx-skeleton-loader

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html

@@ -21,27 +21,27 @@
     </p>
     <ul class="list-unstyled mb-3 pl-3">
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>Portfolio Summary</span>
       </li>
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>Portfolio Allocations</span>
       </li>
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>Performance Benchmarks</span>
       </li>
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>FIRE Calculator</span>
       </li>
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>Professional Data Provider</span>
       </li>
       <li class="align-items-center d-flex mb-1">
-        <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+        <ion-icon class="mr-1" name="checkmark-circle-outline" />
         <span i18n>and more Features...</span>
       </li>
     </ul>
@@ -60,6 +60,6 @@
     (click)="closeDialog()"
   >
     <span i18n>Upgrade Plan</span>
-    <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
+    <ion-icon class="ml-1" name="arrow-forward-outline" />
   </a>
 </div>

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -21,7 +21,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large" />
     </a>
   </div>
 </div>

apps/client/src/app/pages/about/about-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

apps/client/src/app/pages/about/oss-friends/oss-friends-page.html

@@ -27,10 +27,7 @@
                   <span
                     ><ng-container i18n>Visit</ng-container> {{ ossFriend.name
                     }}</span
-                  ><ion-icon
+                  ><ion-icon class="ml-1" name="arrow-forward-outline" />
-                    class="ml-1"
-                    name="arrow-forward-outline"
-                  ></ion-icon>
                 </a>
               </mat-card-actions>
             </mat-card>

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -86,7 +86,7 @@
             mat-icon-button
             title="Send an e-mail"
           >
-            <ion-icon name="mail"></ion-icon>
+            <ion-icon name="mail" />
           </a>
           <a
             class="mx-2"
@@ -94,7 +94,7 @@
             mat-icon-button
             title="Join the Ghostfolio Slack community"
           >
-            <ion-icon name="logo-slack"></ion-icon>
+            <ion-icon name="logo-slack" />
           </a>
           <a
             class="mx-2"
@@ -102,7 +102,7 @@
             mat-icon-button
             title="Find Ghostfolio on GitHub"
           >
-            <ion-icon name="logo-github"></ion-icon>
+            <ion-icon name="logo-github" />
           </a>
         </p>
         <div

apps/client/src/app/pages/accounts/accounts-page.html

@@ -31,7 +31,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large" />
     </a>
   </div>
 </div>

apps/client/src/app/pages/admin/admin-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

apps/client/src/app/pages/blog/blog-page.html

@@ -29,7 +29,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -55,7 +55,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -79,7 +79,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -105,7 +105,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -131,7 +131,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -158,7 +158,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -184,7 +184,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -210,7 +210,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -236,7 +236,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -262,7 +262,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -288,7 +288,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -316,7 +316,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -340,7 +340,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -364,7 +364,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -390,7 +390,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -416,7 +416,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -442,7 +442,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -466,7 +466,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>
@@ -490,7 +490,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>

apps/client/src/app/pages/home/home-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -59,7 +59,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large" />
     </a>
   </div>
 </div>

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -140,7 +140,7 @@
             class="text-muted"
             matDatepickerToggleIcon
             name="calendar-clear-outline"
-          ></ion-icon>
+          />
         </mat-datepicker-toggle>
         <mat-datepicker #date disabled="false"></mat-datepicker>
       </mat-form-field>
@@ -210,7 +210,7 @@
           type="button"
           (click)="applyCurrentMarketPrice()"
         >
-          <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
+          <ion-icon class="text-muted" name="refresh-outline" />
         </button>
       </div>
     </div>
@@ -326,7 +326,7 @@
             (removed)="onRemoveTag(tag)"
           >
             {{ tag.name }}
-            <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
+            <ion-icon class="ml-2" matPrefix name="close-outline" />
           </mat-chip-row>
           <input
             #tagInput

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -78,10 +78,7 @@
               <div
                 class="align-items-center d-flex flex-column justify-content-center"
               >
-                <ion-icon
+                <ion-icon class="cloud-icon" name="cloud-upload-outline" />
-                  class="cloud-icon"
-                  name="cloud-upload-outline"
-                ></ion-icon>
                 <span i18n>Choose or drop a file here</span>
               </div>
             </button>
@@ -182,7 +179,7 @@
                 <mat-panel-title>
                   <div class="d-flex">
                     <div class="align-items-center d-flex mr-2">
-                      <ion-icon name="warning-outline"></ion-icon>
+                      <ion-icon name="warning-outline" />
                     </div>
                     <div>{{ message }}</div>
                   </div>

apps/client/src/app/pages/portfolio/portfolio-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

apps/client/src/app/pages/pricing/pricing-page.html

@@ -39,82 +39,52 @@
                 </p>
                 <ul class="list-unstyled mb-3">
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Data Import and Export</span>
                     <span
                       class="align-items-center d-flex ml-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipOSS"
                     >
-                      <ion-icon name="information-circle-outline"></ion-icon>
+                      <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Community Support</span>
                   </li>
                 </ul>
@@ -144,7 +114,7 @@
                 <div class="align-items-center d-flex mb-2">
                   <h4 class="flex-grow-1 m-0">Basic</h4>
                   <div *ngIf="user?.subscription?.type === 'Basic'">
-                    <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                    <ion-icon class="mr-1" name="checkmark-outline" />
                   </div>
                 </div>
                 <p i18n>
@@ -152,38 +122,26 @@
                 </p>
                 <ul class="list-unstyled mb-3">
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Data Import and Export</span>
                     <span
                       class="align-items-center d-flex ml-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipBasic"
                     >
-                      <ion-icon name="information-circle-outline"></ion-icon>
+                      <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
                 </ul>
@@ -219,7 +177,7 @@
                     ></gf-premium-indicator>
                   </h4>
                   <div *ngIf="user?.subscription?.type === 'Premium'">
-                    <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                    <ion-icon class="mr-1" name="checkmark-outline" />
                   </div>
                 </div>
                 <p i18n>
@@ -228,89 +186,56 @@
                 </p>
                 <ul class="list-unstyled mb-3">
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Data Import and Export</span>
                     <span
                       class="align-items-center d-flex ml-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipPremium"
                     >
-                      <ion-icon name="information-circle-outline"></ion-icon>
+                      <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Professional Data Provider</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon
+                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                      class="mr-1"
-                      name="checkmark-circle-outline"
-                    ></ion-icon>
                     <span i18n>Email and Chat Support</span>
                   </li>
                 </ul>

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html

@@ -22,8 +22,9 @@
           [cdkCopyToClipboard]="data.accessToken"
           (click)="enableAgreeButton()"
         >
-          <ion-icon class="mr-1" name="copy-outline"></ion-icon
+          <ion-icon class="mr-1" name="copy-outline" /><span i18n
-          ><span i18n>Copy to clipboard</span>
+            >Copy to clipboard</span
+          >
         </button>
       </div>
     </mat-form-field>
@@ -42,6 +43,6 @@
     [mat-dialog-close]="data"
   >
     <span i18n>Agree and continue</span>
-    <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
+    <ion-icon class="ml-1" name="arrow-forward-outline" />
   </button>
 </div>

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -41,7 +41,7 @@
                     class="chevron text-muted"
                     name="chevron-forward-outline"
                     size="small"
-                  ></ion-icon>
+                  />
                 </div>
               </a>
             </div>

apps/client/src/app/pages/user-account/user-account-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

apps/client/src/app/pages/zen/zen-page.html

@@ -22,7 +22,7 @@
       <ion-icon
         [name]="tab.iconName"
         [size]="deviceType === 'mobile' ? 'large': 'small'"
-      ></ion-icon>
+      />
       <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
     </a>
   </ng-container>

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -41,12 +41,12 @@
         [matMenuTriggerFor]="accountBalanceMenu"
         (click)="$event.stopPropagation()"
       >
-        <ion-icon name="ellipsis-horizontal"></ion-icon>
+        <ion-icon name="ellipsis-horizontal" />
       </button>
       <mat-menu #accountBalanceMenu="matMenu" xPosition="before">
         <button mat-menu-item (click)="onDeleteAccountBalance(element.id)">
           <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+            <ion-icon class="mr-2" name="trash-outline" />
             <span i18n>Delete</span>
           </span>
         </button>

libs/ui/src/lib/activities-filter/activities-filter.component.html

@@ -1,6 +1,6 @@
 <mat-form-field appearance="outline" class="w-100">
   <button disabled mat-icon-button matPrefix>
-    <ion-icon name="search-outline"></ion-icon>
+    <ion-icon name="search-outline" />
   </button>
   <mat-chip-grid #chipList aria-label="Search keywords">
     <mat-chip-row
@@ -12,7 +12,7 @@
     >
       {{ filter.label | gfSymbol }}
       <button matChipRemove>
-        <ion-icon name="close-outline"></ion-icon>
+        <ion-icon name="close-outline" />
       </button>
     </mat-chip-row>
     <input

libs/ui/src/lib/activities-table-lazy/activities-table-lazy.component.html

@@ -4,7 +4,7 @@
     mat-stroked-button
     (click)="onImport()"
   >
-    <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+    <ion-icon class="mr-2" name="cloud-upload-outline" />
     <ng-container i18n>Import Activities</ng-container>...
   </button>
   <button
@@ -14,7 +14,7 @@
     [matMenuTriggerFor]="activitiesMenu"
     (click)="$event.stopPropagation()"
   >
-    <ion-icon name="ellipsis-vertical"></ion-icon>
+    <ion-icon name="ellipsis-vertical" />
   </button>
   <mat-menu #activitiesMenu="matMenu" xPosition="before">
     <button
@@ -23,7 +23,7 @@
       (click)="onImportDividends()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+        <ion-icon class="mr-2" name="color-wand-outline" />
         <ng-container i18n>Import Dividends</ng-container>...
       </span>
     </button>
@@ -35,7 +35,7 @@
       (click)="onExport()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+        <ion-icon class="mr-2" name="cloud-download-outline" />
         <span i18n>Export Activities</span>
       </span>
     </button>
@@ -47,7 +47,7 @@
       (click)="onExportDrafts()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+        <ion-icon class="mr-2" name="calendar-clear-outline" />
         <span i18n>Export Drafts as ICS</span>
       </span>
     </button>
@@ -57,7 +57,7 @@
       (click)="onDeleteAllActivities()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+        <ion-icon class="mr-2" name="trash-outline" />
         <span i18n>Delete all Activities</span>
       </span>
     </button>
@@ -108,7 +108,7 @@
           matTooltipPosition="above"
           [matTooltip]="element.error.message"
         >
-          <ion-icon class="text-danger" name="alert-circle-outline"></ion-icon>
+          <ion-icon class="text-danger" name="alert-circle-outline" />
         </div>
       </td>
     </ng-container>
@@ -331,7 +331,7 @@
           title="Note"
           (click)="onOpenComment(element.comment); $event.stopPropagation()"
         >
-          <ion-icon name="document-text-outline"></ion-icon>
+          <ion-icon name="document-text-outline" />
         </button>
       </td>
     </ng-container>
@@ -347,7 +347,7 @@
           [matMenuTriggerFor]="activitiesMenu"
           (click)="$event.stopPropagation()"
         >
-          <ion-icon name="ellipsis-vertical"></ion-icon>
+          <ion-icon name="ellipsis-vertical" />
         </button>
         <mat-menu #activitiesMenu="matMenu" xPosition="before">
           <button
@@ -357,7 +357,7 @@
             (click)="onImport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+              <ion-icon class="mr-2" name="cloud-upload-outline" />
               <ng-container i18n>Import Activities</ng-container>...
             </span>
           </button>
@@ -368,7 +368,7 @@
             (click)="onImportDividends()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+              <ion-icon class="mr-2" name="color-wand-outline" />
               <ng-container i18n>Import Dividends</ng-container>...
             </span>
           </button>
@@ -380,7 +380,7 @@
             (click)="onExport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+              <ion-icon class="mr-2" name="cloud-download-outline" />
               <span i18n>Export Activities</span>
             </span>
           </button>
@@ -392,7 +392,7 @@
             (click)="onExportDrafts()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
               <span i18n>Export Drafts as ICS</span>
             </span>
           </button>
@@ -406,18 +406,18 @@
           [matMenuTriggerFor]="activityMenu"
           (click)="$event.stopPropagation()"
         >
-          <ion-icon name="ellipsis-horizontal"></ion-icon>
+          <ion-icon name="ellipsis-horizontal" />
         </button>
         <mat-menu #activityMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateActivity(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline"></ion-icon>
+              <ion-icon class="mr-2" name="create-outline" />
               <span i18n>Edit</span>
             </span>
           </button>
           <button mat-menu-item (click)="onCloneActivity(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="copy-outline"></ion-icon>
+              <ion-icon class="mr-2" name="copy-outline" />
               <span i18n>Clone</span>
             </span>
           </button>
@@ -427,13 +427,13 @@
             (click)="onExportDraft(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
               <span i18n>Export Draft as ICS</span>
             </span>
           </button>
           <button mat-menu-item (click)="onDeleteActivity(element.id)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+              <ion-icon class="mr-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -12,7 +12,7 @@
     mat-stroked-button
     (click)="onImport()"
   >
-    <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+    <ion-icon class="mr-2" name="cloud-upload-outline" />
     <ng-container i18n>Import Activities</ng-container>...
   </button>
   <button
@@ -22,7 +22,7 @@
     [matMenuTriggerFor]="activitiesMenu"
     (click)="$event.stopPropagation()"
   >
-    <ion-icon name="ellipsis-vertical"></ion-icon>
+    <ion-icon name="ellipsis-vertical" />
   </button>
   <mat-menu #activitiesMenu="matMenu" xPosition="before">
     <button
@@ -31,7 +31,7 @@
       (click)="onImportDividends()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+        <ion-icon class="mr-2" name="color-wand-outline" />
         <ng-container i18n>Import Dividends</ng-container>...
       </span>
     </button>
@@ -43,7 +43,7 @@
       (click)="onExport()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+        <ion-icon class="mr-2" name="cloud-download-outline" />
         <span i18n>Export Activities</span>
       </span>
     </button>
@@ -55,7 +55,7 @@
       (click)="onExportDrafts()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+        <ion-icon class="mr-2" name="calendar-clear-outline" />
         <span i18n>Export Drafts as ICS</span>
       </span>
     </button>
@@ -65,7 +65,7 @@
       (click)="onDeleteAllActivities()"
     >
       <span class="align-items-center d-flex">
-        <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+        <ion-icon class="mr-2" name="trash-outline" />
         <span i18n>Delete all Activities</span>
       </span>
     </button>
@@ -116,7 +116,7 @@
           matTooltipPosition="above"
           [matTooltip]="element.error.message"
         >
-          <ion-icon class="text-danger" name="alert-circle-outline"></ion-icon>
+          <ion-icon class="text-danger" name="alert-circle-outline" />
         </div>
       </td>
       <td *matFooterCellDef class="px-1" mat-footer-cell></td>
@@ -418,7 +418,7 @@
           title="Note"
           (click)="onOpenComment(element.comment); $event.stopPropagation()"
         >
-          <ion-icon name="document-text-outline"></ion-icon>
+          <ion-icon name="document-text-outline" />
         </button>
       </td>
       <td
@@ -439,7 +439,7 @@
           [matMenuTriggerFor]="activitiesMenu"
           (click)="$event.stopPropagation()"
         >
-          <ion-icon name="ellipsis-vertical"></ion-icon>
+          <ion-icon name="ellipsis-vertical" />
         </button>
         <mat-menu #activitiesMenu="matMenu" xPosition="before">
           <button
@@ -449,7 +449,7 @@
             (click)="onImport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+              <ion-icon class="mr-2" name="cloud-upload-outline" />
               <ng-container i18n>Import Activities</ng-container>...
             </span>
           </button>
@@ -460,7 +460,7 @@
             (click)="onImportDividends()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="color-wand-outline"></ion-icon>
+              <ion-icon class="mr-2" name="color-wand-outline" />
               <ng-container i18n>Import Dividends</ng-container>...
             </span>
           </button>
@@ -472,7 +472,7 @@
             (click)="onExport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+              <ion-icon class="mr-2" name="cloud-download-outline" />
               <span i18n>Export Activities</span>
             </span>
           </button>
@@ -484,7 +484,7 @@
             (click)="onExportDrafts()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
               <span i18n>Export Drafts as ICS</span>
             </span>
           </button>
@@ -498,18 +498,18 @@
           [matMenuTriggerFor]="activityMenu"
           (click)="$event.stopPropagation()"
         >
-          <ion-icon name="ellipsis-horizontal"></ion-icon>
+          <ion-icon name="ellipsis-horizontal" />
         </button>
         <mat-menu #activityMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdateActivity(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline"></ion-icon>
+              <ion-icon class="mr-2" name="create-outline" />
               <span i18n>Edit</span>
             </span>
           </button>
           <button mat-menu-item (click)="onCloneActivity(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="copy-outline"></ion-icon>
+              <ion-icon class="mr-2" name="copy-outline" />
               <span i18n>Clone</span>
             </span>
           </button>
@@ -519,13 +519,13 @@
             (click)="onExportDraft(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+              <ion-icon class="mr-2" name="calendar-clear-outline" />
               <span i18n>Export Draft as ICS</span>
             </span>
           </button>
           <button mat-menu-item (click)="onDeleteActivity(element.id)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+              <ion-icon class="mr-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

libs/ui/src/lib/activity-type/activity-type.component.html

@@ -10,23 +10,14 @@
     sell: activityType === 'SELL'
   }"
 >
-  <ion-icon
+  <ion-icon *ngIf="activityType === 'BUY'" name="arrow-up-circle-outline" />
-    *ngIf="activityType === 'BUY'"
-    name="arrow-up-circle-outline"
-  ></ion-icon>
   <ion-icon
     *ngIf="activityType === 'DIVIDEND' || activityType === 'INTEREST'"
     name="add-circle-outline"
-  ></ion-icon>
+  />
-  <ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline"></ion-icon>
+  <ion-icon *ngIf="activityType === 'FEE'" name="hammer-outline" />
-  <ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline"></ion-icon>
+  <ion-icon *ngIf="activityType === 'ITEM'" name="cube-outline" />
-  <ion-icon
+  <ion-icon *ngIf="activityType === 'LIABILITY'" name="flame-outline" />
-    *ngIf="activityType === 'LIABILITY'"
+  <ion-icon *ngIf="activityType === 'SELL'" name="arrow-down-circle-outline" />
-    name="flame-outline"
-  ></ion-icon>
-  <ion-icon
-    *ngIf="activityType === 'SELL'"
-    name="arrow-down-circle-outline"
-  ></ion-icon>
   <span class="d-none d-lg-block mx-1">{{ activityTypeLabel }}</span>
 </div>

libs/ui/src/lib/assistant/assistant.html

@@ -4,7 +4,7 @@
   (keydown.tab)="$event.stopPropagation()"
 >
   <div class="align-items-center d-flex search-container">
-    <ion-icon class="ml-2 mr-0" name="search-outline"></ion-icon>
+    <ion-icon class="ml-2 mr-0" name="search-outline" />
     <input
       #search
       autocomplete="off"
@@ -27,7 +27,7 @@
       mat-button
       (click)="initialize()"
     >
-      <ion-icon class="m-0" name="close-circle-outline"></ion-icon>
+      <ion-icon class="m-0" name="close-circle-outline" />
     </button>
     <button
       *ngIf="!searchFormControl.value"
@@ -35,7 +35,7 @@
       mat-button
       (click)="onCloseAssistant()"
     >
-      <ion-icon class="m-0" name="close-outline"></ion-icon>
+      <ion-icon class="m-0" name="close-outline" />
     </button>
   </div>
   <div

libs/ui/src/lib/carousel/carousel.component.html

@@ -7,7 +7,7 @@
   tabindex="-1"
   (click)="previous()"
 >
-  <ion-icon name="chevron-back-outline"></ion-icon>
+  <ion-icon name="chevron-back-outline" />
 </button>
 
 <div
@@ -30,5 +30,5 @@
   tabindex="-1"
   (click)="next()"
 >
-  <ion-icon name="chevron-forward-outline"></ion-icon>
+  <ion-icon name="chevron-forward-outline" />
 </button>

libs/ui/src/lib/premium-indicator/premium-indicator.component.html

@@ -3,5 +3,5 @@
   title="Upgrade to Ghostfolio Premium"
   [ngStyle]="{ 'pointer-events': enableLink ? 'initial' : 'none' }"
   [routerLink]="['/pricing']"
-  ><ion-icon class="text-muted" name="diamond-outline"></ion-icon
+  ><ion-icon class="text-muted" name="diamond-outline"
-></a>
+/></a>

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -14,16 +14,14 @@
     class="text-muted"
     name="pause-circle-outline"
     [size]="size"
-  >
+  />
-  </ion-icon>
   <ng-template #delayed>
     <ion-icon
       *ngIf="marketState === 'delayed' && range === '1d'; else trend"
       class="text-muted"
       name="time-outline"
       [size]="size"
-    >
+    />
-    </ion-icon>
   </ng-template>
   <ng-template #trend>
     <ng-container>
@@ -33,20 +31,20 @@
         name="arrow-down-circle-outline"
         [ngClass]="{ 'rotate-45-down': value > -0.01 }"
         [size]="size"
-      ></ion-icon>
+      />
       <ion-icon
         *ngIf="value > -0.0005 && value < 0.0005"
         class="text-muted"
         name="arrow-forward-circle-outline"
         [size]="size"
-      ></ion-icon>
+      />
       <ion-icon
         *ngIf="value >= 0.0005"
         class="text-success"
         name="arrow-up-circle-outline"
         [ngClass]="{ 'rotate-45-up': value < 0.01 }"
         [size]="size"
-      ></ion-icon>
+      />
     </ng-container>
   </ng-template>
 </ng-template>

libs/ui/src/lib/value/value.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="icon" class="align-self-center mr-3">
-  <ion-icon class="h3 m-0" [name]="icon"></ion-icon>
+  <ion-icon class="h3 m-0" [name]="icon" />
 </div>
 <div class="w-100">
   <ng-template #label><ng-content></ng-content></ng-template>