Fix in products view routes (#1643)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/products/charges/charges.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonCreateCharge class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Charge
     </button>
   </div>

src/app/products/charges/view-charge/view-charge.component.html

@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteCharge()" *mifosxHasPermission="'DELETE_CHARGE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -16,11 +16,11 @@
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
-        
+
         <div fxFlex="50%" class="mat-body-strong">
           Charge Name
         </div>
-          
+
         <div fxFlex="50%">
           {{ chargeData.name }}
         </div>
@@ -28,7 +28,7 @@
         <div fxFlex="50%" class="mat-body-strong">
           Charge Type
         </div>
-          
+
         <div fxFlex="50%">
           {{ chargeData.penalty === true ? 'Penalty' : 'Charge' }}
         </div>

src/app/products/collaterals/collaterals.component.html

@@ -1,28 +1,28 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Collateral
     </button>
   </div>
-  
+
   <div class="container">
-  
+
     <div fxLayout="row" fxLayoutGap="20px">
       <mat-form-field fxFlex>
         <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
         <input matInput (keyup)="applyFilter($event.target.value)">
       </mat-form-field>
     </div>
-  
+
     <div class="mat-elevation-z8">
-  
+
       <table mat-table [dataSource]="dataSource" matSort>
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="quality">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Quality/Type </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
@@ -42,15 +42,14 @@
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Type </th>
           <td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-  
+
       </table>
-  
+
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
+
     </div>
-  
+
   </div>
-  

src/app/products/collaterals/view-collateral/view-collateral.component.html

@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <button mat-raised-button color="primary" [routerLink]="['edit']" >
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>
         Edit
     </button>
     <button mat-raised-button color="warn" (click)="deleteCollateral()" >
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>
         Delete
     </button>
 </div>
@@ -71,4 +71,4 @@
 
     </mat-card>
 
-</div>
+</div>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-accounting-step/fixed-deposit-product-accounting-step.component.html

@@ -110,7 +110,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -152,7 +152,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -194,7 +194,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -241,7 +241,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!fixedDepositProductFormValid">

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-charges-step/fixed-deposit-product-charges-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-currency-step/fixed-deposit-product-currency-step.component.html

@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-details-step/fixed-deposit-product-details-step.component.html

@@ -30,7 +30,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-interest-rate-chart-step/fixed-deposit-product-interest-rate-chart-step.component.html

@@ -6,7 +6,7 @@
 
     <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Add
       </button>
     </div>
@@ -55,7 +55,7 @@
             Is primary grouping by amount?
           </mat-checkbox>
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Slab
           </button>
         </div>
@@ -105,11 +105,11 @@
               </button>
               <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                  <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye" class="m-r-10"></fa-icon>
                   View Incentives
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                  <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                   Hide Incentives
                 </span>
               </button>
@@ -129,7 +129,7 @@
 
                   <div fxFlex="83%">
                     <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
-                      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="plus" class="m-r-10"></fa-icon>
                       Add
                     </button>
                   </div>
@@ -217,7 +217,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html

@@ -178,11 +178,11 @@
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
             <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
                 View Incentives
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                 Hide Incentives
               </span>
             </button>
@@ -448,7 +448,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-settings-step/fixed-deposit-product-settings-step.component.html

@@ -116,7 +116,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-terms-step/fixed-deposit-product-terms-step.component.html

@@ -76,7 +76,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/fixed-deposit-products/fixed-deposit-products.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateFixedProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Fixed Deposit Product
   </button>
 </div>

src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
@@ -218,11 +218,11 @@
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
                   <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-                      <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye" class="m-r-10"></fa-icon>
                       View Incentives
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-                      <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                       Hide Incentives
                     </span>
                   </button>

src/app/products/floating-rates/floating-rates.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FLOATINGRATE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Floating Rate
   </button>
 </div>
@@ -30,17 +30,17 @@
 
       <ng-container matColumnDef="isBaseLendingRate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Is base lending rate? </th>
-        <td mat-cell *matCellDef="let floatingRate"> 
+        <td mat-cell *matCellDef="let floatingRate">
           <fa-icon *ngIf="floatingRate.isBaseLendingRate" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!floatingRate.isBaseLendingRate" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon> 
+          <fa-icon *ngIf="!floatingRate.isBaseLendingRate" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="isActive">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Active </th>
-          <td mat-cell *matCellDef="let floatingRate"> 
+          <td mat-cell *matCellDef="let floatingRate">
             <fa-icon *ngIf="floatingRate.isActive" icon="check-circle" size="lg" class="is-base-lending-rate-or-active" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-            <fa-icon *ngIf="!floatingRate.isActive" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon> 
+            <fa-icon *ngIf="!floatingRate.isActive" icon="times-circle" size="lg" class="not-is-base-lending-rate-or-active" matTooltip="No" matTooltipPosition="right"></fa-icon>
           </td>
         </ng-container>
 

src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FLOATINGRATE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 

src/app/products/loan-products/edit-loan-product/loan-product-and-template.resolver.ts

@@ -24,7 +24,7 @@ export class LoanProductAndTemplateResolver implements Resolve<Object> {
    * @returns {Observable<any>}
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanProductId = route.paramMap.get('productId');
+    const loanProductId = route.parent.paramMap.get('productId');
     return this.productsService.getLoanProduct(loanProductId, true);
   }
 

src/app/products/loan-products/loan-product-stepper/loan-product-accounting-step/loan-product-accounting-step.component.html

@@ -200,7 +200,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -242,7 +242,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -284,7 +284,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -331,7 +331,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!loanProductFormValid">

src/app/products/loan-products/loan-product-stepper/loan-product-charges-step/loan-product-charges-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -77,7 +77,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(overdueCharge)" [disabled]="!overdueCharge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -130,7 +130,7 @@
 
 <div fxLayout="row" class="margin-t+" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-product-stepper/loan-product-currency-step/loan-product-currency-step.component.html

@@ -42,7 +42,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-product-stepper/loan-product-datatable-step/loan-product-datatable-step.component.html

@@ -39,7 +39,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-product-stepper/loan-product-details-step/loan-product-details-step.component.html

@@ -54,7 +54,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html

@@ -742,7 +742,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.html

@@ -450,7 +450,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-product-stepper/loan-product-terms-step/loan-product-terms-step.component.html

@@ -172,7 +172,7 @@
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('Principal', principalVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -235,7 +235,7 @@
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NumberOfRepayments', numberOfRepaymentVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -298,7 +298,7 @@
 
       <div fxFlex="73%">
         <button type="button" mat-raised-button color="primary" (click)="addVariationsForBorrowerCycle('NominalInterestRate', interestRateVariationsForBorrowerCycle)">
-          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
           Add
         </button>
       </div>
@@ -392,7 +392,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/loan-products/loan-products.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateLoanProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Loan Product
   </button>
   </div>

src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
+  <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_LOANPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
   </button>
 </div>

src/app/products/manage-delinquency-buckets/delinquency-bucket/create-bucket/create-bucket.component.html

@@ -20,7 +20,7 @@
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>

src/app/products/manage-delinquency-buckets/delinquency-bucket/delinquency-bucket.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Delinquency Bucket
   </button>
 </div>

src/app/products/manage-delinquency-buckets/delinquency-bucket/edit-bucket/edit-bucket.component.html

@@ -20,7 +20,7 @@
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addDelinquencyRange()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>

src/app/products/manage-delinquency-buckets/delinquency-bucket/view-bucket/view-bucket.component.html

@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteDelinquencyBucket()" *mifosxHasPermission="'DELETE_DELINQUENCY_BUCKET'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/products/manage-delinquency-buckets/delinquency-range/delinquency-range.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_DELINQUENCY_RANGE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Delinquency Range
   </button>
 </div>

src/app/products/manage-delinquency-buckets/delinquency-range/view-range/view-range.component.html

@@ -1,10 +1,10 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_DELINQUENCY_RANGE'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="warn" (click)="deleteDelinquencyRange()" *mifosxHasPermission="'DELETE_DELINQUENCY_RANGE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/products/manage-tax-components/manage-tax-components.component.html

@@ -1,40 +1,40 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXCOMPONENT'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Tax Component
     </button>
   </div>
-  
+
   <div class="container">
-  
+
     <div fxLayout="row">
       <mat-form-field fxFlex>
         <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
         <input matInput (keyup)="applyFilter($event.target.value)">
       </mat-form-field>
     </div>
-  
+
     <div class="mat-elevation-z8">
-  
+
       <table mat-table [dataSource]="dataSource" matSort>
-  
+
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
           <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.name }} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="percentage">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Percentage </th>
           <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.percentage }} </td>
         </ng-container>
-  
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
-  
+
       </table>
-  
+
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
+
     </div>
 
   </div>

src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXCOMPONENT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>

src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html

@@ -20,7 +20,7 @@
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>

src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html

@@ -20,7 +20,7 @@
 
           <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
             <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
-              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="plus" class="m-r-10"></fa-icon>
               Add
             </button>
           </div>

src/app/products/manage-tax-groups/manage-tax-groups.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXGROUP'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Tax Groups
   </button>
 </div>

src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXGROUP'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>

src/app/products/products-mix/products-mix.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_PRODUCTMIX'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
   </button>
 </div>
 

src/app/products/products-mix/view-product-mix/view-product-mix.component.html

@@ -1,47 +1,47 @@
-<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
-  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
-    Delete
-  </button>
-</div>
-
-<div class="container">
-  
-    <div class="mat-elevation-z8 inline-table">
-  
-      <table mat-table [dataSource]="allowedProductsDatasource" matSort>
-        
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'"> Allowed Products </th>
-          <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns;"></tr>
-      </table>
-
-      <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-  
-    </div>
-
-    <div class="mat-elevation-z8 inline-table">
-        
-      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
-        
-        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Restricted Products </th>
-          <td mat-cell *matCellDef="let product"> {{ product.name }} </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns;"></tr>
-      </table>
-  
-      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
-    </div>
-  
-  </div>
+<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="20px">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_PRODUCTMIX'">
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
+    Edit
+  </button>
+  <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_PRODUCTMIX'">
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
+    Delete
+  </button>
+</div>
+
+<div class="container">
+
+    <div class="mat-elevation-z8 inline-table">
+
+      <table mat-table [dataSource]="allowedProductsDatasource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'customWidthClass'"> Allowed Products </th>
+          <td mat-cell *matCellDef="let product" [ngClass]="'customWidthClass'"> {{ product.name }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="allowedProductsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: allowedProductsDisplayedColumns;"></tr>
+      </table>
+
+      <mat-paginator #allowed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+    </div>
+
+    <div class="mat-elevation-z8 inline-table">
+
+      <table mat-table [dataSource]="restrictedProductsDatasource" matSort>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Restricted Products </th>
+          <td mat-cell *matCellDef="let product"> {{ product.name }} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="restrictedProductsDisplayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: restrictedProductsDisplayedColumns;"></tr>
+      </table>
+
+      <mat-paginator #restricted [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+    </div>
+
+  </div>

src/app/products/products-routing.module.ts

@@ -217,7 +217,6 @@ const routes: Routes = [
             },
             {
               path: ':productId',
-              component: ViewSavingProductComponent,
               data: { title: extract('View Saving Product'), breadcrumb: 'productId', routeParamBreadcrumb: 'productId' },
               resolve: {
                 savingProductDatatables: SavingProductDatatablesResolver
@@ -225,27 +224,34 @@ const routes: Routes = [
               children: [
                 {
                   path: '',
-                  redirectTo: 'general',
-                  pathMatch: 'full'
-                },
-                {
-                  path: 'general',
-                  data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
-                  component: SavingProductGeneralTabComponent,
-                  resolve: {
-                    savingProduct: SavingProductResolver
-                  },
-                },
-                {
-                  path: 'datatables',
-                  children: [{
-                    path: ':datatableName',
-                    component: SavingProductDatatableTabComponent,
-                    data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-                    resolve: {
-                      savingProductDatatable: SavingProductDatatableResolver
+                  component: ViewSavingProductComponent,
+
+                  children: [
+                    {
+                      path: '',
+                      redirectTo: 'general',
+                      pathMatch: 'full'
+                    },
+                    {
+                      path: 'general',
+                      data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+                      component: SavingProductGeneralTabComponent,
+                      resolve: {
+                        savingProduct: SavingProductResolver
+                      },
+                    },
+                    {
+                      path: 'datatables',
+                      children: [{
+                        path: ':datatableName',
+                        component: SavingProductDatatableTabComponent,
+                        data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                        resolve: {
+                          savingProductDatatable: SavingProductDatatableResolver
+                        }
+                      }]
                     }
-                  }]
+                  ]
                 },
                 {
                   path: 'edit',
@@ -256,7 +262,7 @@ const routes: Routes = [
                   }
                 }
               ]
-            }
+            },
           ]
         },
         {
@@ -302,7 +308,7 @@ const routes: Routes = [
                 },
                 {
                   path: 'dividends',
-                  data: { title: extract('Share Products Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false},
+                  data: { title: extract('Share Products Dividends'), breadcrumb: 'Dividends', routeParamBreadcrumb: false },
                   children: [
                     {
                       path: '',
@@ -335,7 +341,7 @@ const routes: Routes = [
         },
         {
           path: 'tax-configurations',
-          data: { title:  extract('Manage Tax Configurations'), breadcrumb: 'Manage Tax Configurations' },
+          data: { title: extract('Manage Tax Configurations'), breadcrumb: 'Manage Tax Configurations' },
           children: [
             {
               path: '',
@@ -343,7 +349,7 @@ const routes: Routes = [
             },
             {
               path: 'tax-components',
-              data: { title: extract('Manage Tax Components'), breadcrumb: 'Tax Components'},
+              data: { title: extract('Manage Tax Components'), breadcrumb: 'Tax Components' },
               children: [
                 {
                   path: '',
@@ -376,7 +382,7 @@ const routes: Routes = [
                     },
                     {
                       path: 'edit',
-                      data: { title: extract('Edit Tax Component'), breadcrumb: 'Edit', routeParamBreadcrumb: false  },
+                      data: { title: extract('Edit Tax Component'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
                       component: EditTaxComponentComponent,
                       resolve: {
                         taxComponent: TaxComponentResolver
@@ -388,13 +394,13 @@ const routes: Routes = [
             },
             {
               path: 'tax-groups',
-              data: { title: extract('Manage Tax Groups'), breadcrumb: 'Tax Groups'},
+              data: { title: extract('Manage Tax Groups'), breadcrumb: 'Tax Groups' },
               children: [
                 {
                   path: '',
                   component: ManageTaxGroupsComponent,
                   resolve: {
-                  taxGroups: ManageTaxGroupsResolver
+                    taxGroups: ManageTaxGroupsResolver
                   }
                 },
                 {
@@ -435,7 +441,7 @@ const routes: Routes = [
         },
         {
           path: 'delinquency-bucket-configurations',
-          data: { title:  extract('Manage Delinquency Bucket Configurations'), breadcrumb: 'Manage Delinquency Bucket Configurations' },
+          data: { title: extract('Manage Delinquency Bucket Configurations'), breadcrumb: 'Manage Delinquency Bucket Configurations' },
           children: [
             {
               path: '',
@@ -443,7 +449,7 @@ const routes: Routes = [
             },
             {
               path: 'ranges',
-              data: { title: extract('Manage Delinquency Ranges'), breadcrumb: 'Delinquency Ranges'},
+              data: { title: extract('Manage Delinquency Ranges'), breadcrumb: 'Delinquency Ranges' },
               children: [
                 {
                   path: '',
@@ -485,7 +491,7 @@ const routes: Routes = [
             },
             {
               path: 'buckets',
-              data: { title: extract('Manage Delinquency Bucket'), breadcrumb: 'Delinquency Buckets'},
+              data: { title: extract('Manage Delinquency Bucket'), breadcrumb: 'Delinquency Buckets' },
               children: [
                 {
                   path: '',
@@ -533,7 +539,7 @@ const routes: Routes = [
         },
         {
           path: 'recurring-deposit-products',
-          data: { title:  extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
+          data: { title: extract('Recurring Deposit Products'), breadcrumb: 'Recurring Deposit Products' },
           children: [
             {
               path: 'create',
@@ -579,7 +585,7 @@ const routes: Routes = [
         },
         {
           path: 'fixed-deposit-products',
-          data: { title:  extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
+          data: { title: extract('Fixed Deposit Products'), breadcrumb: 'Fixed Deposit Products' },
           children: [
             {
               path: 'create',
@@ -625,7 +631,7 @@ const routes: Routes = [
         },
         {
           path: 'products-mix',
-          data: { title:  extract('Products Mix'), breadcrumb: 'Products Mix' },
+          data: { title: extract('Products Mix'), breadcrumb: 'Products Mix' },
           children: [
             {
               path: 'create',
@@ -644,7 +650,7 @@ const routes: Routes = [
             },
             {
               path: ':id',
-              data: { title: extract('View Product Mix'), routeParamBreadcrumb: 'id'},
+              data: { title: extract('View Product Mix'), routeParamBreadcrumb: 'id' },
               resolve: {
                 productMix: ViewProductMixResolver
               },
@@ -803,7 +809,8 @@ const routes: Routes = [
         }
       ]
     }
-  ])
+  ]
+  )
 ];
 
 /**

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-accounting-step/recurring-deposit-product-accounting-step.component.html

@@ -114,7 +114,7 @@
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -159,7 +159,7 @@
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -203,7 +203,7 @@
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary"
             (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -252,7 +252,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!recurringDepositProductFormValid">

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-charges-step/recurring-deposit-product-charges-step.component.html

@@ -12,7 +12,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -66,7 +66,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-currency-step/recurring-deposit-product-currency-step.component.html

@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-details-step/recurring-deposit-product-details-step.component.html

@@ -30,7 +30,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-interest-rate-chart-step/recurring-deposit-product-interest-rate-chart-step.component.html

@@ -6,7 +6,7 @@
 
     <div fxFlex="83%" fxLayout="row" fxLayoutAlign="start center">
       <button type="button" mat-raised-button color="primary" (click)="addChart()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
         Add
       </button>
     </div>
@@ -55,7 +55,7 @@
             Is primary grouping by amount?
           </mat-checkbox>
           <button type="button" mat-raised-button color="primary" (click)="addChartSlab(chart.controls.chartSlabs)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add Slab
           </button>
         </div>
@@ -101,11 +101,11 @@
               </button>
               <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex">
                 <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                  <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye" class="m-r-10"></fa-icon>
                   View Incentives
                 </span>
                 <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                  <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                   Hide Incentives
                 </span>
               </button>
@@ -125,7 +125,7 @@
 
                   <div fxFlex="83%">
                     <button mat-raised-button color="primary" (click)="addIncentive(getIncentives(chart.controls.chartSlabs, chartSlabIndex))">
-                      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="plus" class="m-r-10"></fa-icon>
                       Add
                     </button>
                   </div>
@@ -213,7 +213,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html

@@ -184,11 +184,11 @@
           <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
             <button mat-button color="primary" (click)="expandChartSlabIndex[chartIndex] = expandChartSlabIndex[chartIndex] === chartSlabIndex ? null : chartSlabIndex" [disabled]="chartSlab.incentives.length === 0">
               <span *ngIf="expandChartSlabIndex[chartIndex] !== chartSlabIndex">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
                 View Incentives
               </span>
               <span *ngIf="expandChartSlabIndex[chartIndex] === chartSlabIndex">
-                <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                 Hide Incentives
               </span>
             </button>
@@ -454,7 +454,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-settings-step/recurring-deposit-product-settings-step.component.html

@@ -130,7 +130,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-terms-step/recurring-deposit-product-terms-step.component.html

@@ -76,7 +76,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/recurring-deposit-products/recurring-deposit-products.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateRecurringProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'>
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Recurring Deposit Product
   </button>
 </div>

src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>
@@ -216,11 +216,11 @@
                 <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
                   <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
                     <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
-                      <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye" class="m-r-10"></fa-icon>
                       View Incentives
                     </span>
                     <span *ngIf="expandChartSlabIndex === chartSlabIndex">
-                      <fa-icon icon="eye-slash"></fa-icon>&nbsp;&nbsp;
+                      <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
                       Hide Incentives
                     </span>
                   </button>

src/app/products/saving-products/saving-product-stepper/saving-product-accounting-step/saving-product-accounting-step.component.html

@@ -158,7 +158,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PaymentFundSource', paymentChannelToFundSourceMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -200,7 +200,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('FeesIncome', feeToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -242,7 +242,7 @@
 
         <div fxFlex="63%">
           <button type="button" mat-raised-button color="primary" (click)="add('PenaltyIncome', penaltyToIncomeAccountMappings)">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>
             Add
           </button>
         </div>
@@ -289,7 +289,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!savingProductFormValid">

src/app/products/saving-products/saving-product-stepper/saving-product-charges-step/saving-product-charges-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/saving-products/saving-product-stepper/saving-product-currency-step/saving-product-currency-step.component.html

@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/saving-products/saving-product-stepper/saving-product-details-step/saving-product-details-step.component.html

@@ -27,7 +27,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/saving-products/saving-product-stepper/saving-product-preview-step/saving-product-preview-step.component.html

@@ -335,7 +335,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/products/saving-products/saving-product-stepper/saving-product-settings-step/saving-product-settings-step.component.html

@@ -6,7 +6,7 @@
       <mat-label>Minimum Opening Balance</mat-label>
       <input type="number" matInput formControlName="minRequiredOpeningBalance">
     </mat-form-field>
-    
+
     <span fxFlex="48%" fxHide.lt-md></span>
 
     <mat-form-field fxFlex="48%">
@@ -123,7 +123,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/saving-products/saving-product-stepper/saving-product-terms-step/saving-product-terms-step.component.html

@@ -64,7 +64,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/saving-products/saving-products.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <div #buttonSavingProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Saving Product
   </button>
   </div>

src/app/products/saving-products/view-saving-product/saving-product-general-tab/saving-product-general-tab.component.html

@@ -1,6 +1,6 @@
 
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
+  <button mat-raised-button color="primary" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
   </button>
 </div>

src/app/products/share-products/dividends-share-product/dividends.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREDIVIDEND'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Initiate Dividend
     </button>
 </div>

src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.html

@@ -80,7 +80,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext [disabled]="!shareProductFormValid">

src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -64,7 +64,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html

@@ -34,7 +34,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html

@@ -27,7 +27,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html

@@ -4,7 +4,7 @@
 
   <div fxFlex="73%">
     <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add
     </button>
   </div>
@@ -46,7 +46,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button matStepperNext>

src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html

@@ -202,7 +202,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html

@@ -62,7 +62,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html

@@ -38,7 +38,7 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>

src/app/products/share-products/share-products.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
 <div #buttonCreateShareProduct class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREPRODUCT'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Share Product
   </button>
 </div>

src/app/products/share-products/view-dividend/view-dividend.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" *ngIf="!isdividendPosted">
   <button mat-raised-button color="primary" *mifosxHasPermission='"POST_DIVIDENDS"' (click)="postDividends()">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Post Dividend
   </button>
 </div>

src/app/products/share-products/view-share-product/view-share-product.component.html

@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
   <button mat-raised-button color="primary" [routerLink]="['dividends']" *mifosxHasPermission="'UPDATE_SHAREPRODUCT'">
-    <fa-icon icon="hand-holding-usd"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="hand-holding-usd" class="m-r-10"></fa-icon>
     Dividends
   </button>
 </div>