Fix in products view routes (#1643)

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

src/app/account-transfers/view-standing-instructions/view-standing-instructions.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>
   <button mat-raised-button color="primary" [routerLink]="['../', 'list-account-transactions']" *mifosxHasPermission="'READ_ACCOUNTTRANSFER'">

src/app/accounting/accounting-rules/accounting-rules.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_ACCOUNTINGRULE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Add Rule
   </button>
 </div>

src/app/accounting/accounting-rules/view-rule/view-rule.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_ACCOUNTINGRULE'">
-    <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)="deleteAccountingRule()" *mifosxHasPermission="'DELETE_ACCOUNTINGRULE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -11,7 +11,7 @@
   </div>
   <div #buttonAddAccount>
     <button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Add Account
     </button>
   </div>

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,30 +1,30 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Subledger Account
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <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>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock" class="m-r-10"></fa-icon>
       Disable
     </button>
   </span>
   <span *mifosxHasPermission="'UPDATE_GLACCOUNT'">
     <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
-      <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
       Enable
     </button>
   </span>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()" *mifosxHasPermission="'DELETE_GLACCOUNT'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/accounting/closing-entries/closing-entries.component.html

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

src/app/accounting/closing-entries/view-closure/view-closure.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)="deleteAccountingClosure()" *mifosxHasPermission="'DELETE_GLCLOSURE'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html

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

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_FINANCIALACTIVITYACCOUNT'">
-    <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)="deleteFinancialActivityAccount()" *mifosxHasPermission="'DELETE_FINANCIALACTIVITYACCOUNT'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -25,7 +25,7 @@
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!periodicAccrualsForm.valid" *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-          <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+          <fa-icon icon="play" class="m-r-10"></fa-icon>
           Run Periodic Accruals
         </button>
       </mat-card-actions>

src/app/accounting/provisioning-entries/provisioning-entries.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="'VIEW_ALL_PROVISIONING_ENTRIES'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Provisioning Entry
   </button>
 </div>
@@ -39,7 +39,7 @@
         <th mat-header-cell *matHeaderCellDef> View Report </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button color="primary" [routerLink]="['view', provisioningEntry.id]">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
           </button>
         </td>
       </ng-container>
@@ -48,7 +48,7 @@
         <th mat-header-cell *matHeaderCellDef> Recreate Provisioning </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="recreateProvisioning($event, provisioningEntry.id)" [disabled]="provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Recreate
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>Recreate
           </button>
         </td>
       </ng-container>
@@ -57,7 +57,7 @@
         <th mat-header-cell *matHeaderCellDef> View Journal Entry </th>
         <td mat-cell *matCellDef="let provisioningEntry">
           <button mat-button (click)="viewJournalEntry($event, provisioningEntry.id)" [disabled]="!provisioningEntry.journalEntry" color="primary">
-            <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;View
+            <fa-icon icon="eye" class="m-r-10"></fa-icon>View
           </button>
         </td>
       </ng-container>

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -2,7 +2,7 @@
 
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
     <button mat-raised-button color="primary" (click)="createProvisioningJournalEntries()" [disabled]="provisioningEntry.journalEntry" *mifosxHasPermission="'CREATE_JOURNAL_ENTRY'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
       Create Journal Entries
     </button>
   </div>

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html

@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateCenterForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateCenterForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Schedule
   </button>
 </div>

src/app/centers/centers-view/center-actions/staff-assignment-history/staff-assignment-history.component.html

@@ -2,7 +2,7 @@
 
   <div class="back-button">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;Back
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back
     </button>
   </div>
 

src/app/centers/centers-view/notes-tab/notes-tab.component.html

@@ -7,7 +7,7 @@
         <textarea formControlName="note" matInput placeholder="Write a note ...."></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid" *mifosxHasPermission="'CREATE_GROUPNOTE'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> Add
       </button>
     </form>
   </div>

src/app/centers/centers.component.html

@@ -12,10 +12,10 @@
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Centers']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Center
+        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Center
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CENTER'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Center
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Center
       </button>
     </div>
   </div>

src/app/clients/client-stepper/client-datatable-step/client-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/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -4,7 +4,7 @@
 
     <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
       <button mat-raised-button color="primary" (click)="addFamilyMember()">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
       </button>
     </div>
 
@@ -55,7 +55,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/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -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/clients/clients-view/address-tab/address-tab.component.html

@@ -4,7 +4,7 @@
 
   <div fxLayout="row" fxLayoutAlign="flex-end">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
   </div>
 

src/app/clients/clients-view/charges/view-charge/view-charge.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]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
-    <fa-icon icon="dollar-sign"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
     Pay
   </button>
   <button mat-raised-button color="primary" (click)="waiveCharge()" *mifosxHasPermission="'WAIVE_CLIENTCHARGE'">
@@ -8,7 +8,7 @@
     Waive Charge
   </button>
   <button mat-raised-button color="primary" (click)="deleteCharge()">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>
@@ -111,7 +111,7 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}">
             <button mat-raised-button color="primary" (click)="undoTransaction(element.id)" class="delBtn">
-              <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="trash" class="m-r-10"></fa-icon>
             </button>
           </td>
         </ng-container>

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html

@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateClientForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html

@@ -27,7 +27,7 @@
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report</button>
       </mat-card-actions>
 
     </form>
@@ -42,7 +42,7 @@
 
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file" class="m-r-10"></fa-icon>
         Print
       </button>
     </div>

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html

@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Take Survey
   </button>
 </div>

src/app/clients/clients-view/clients-view.component.html

@@ -73,7 +73,7 @@
           <span>Edit</span>
         </button>
 
-        <button mat-menu-item [matMenuTriggerFor]="accountApplications">
+        <button *ngIf="isActive()" mat-menu-item [matMenuTriggerFor]="accountApplications">
           <mat-icon matListIcon>
             <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
           </mat-icon>

src/app/clients/clients-view/clients-view.component.ts

@@ -52,6 +52,10 @@ export class ClientsViewComponent implements OnInit {
     );
   }
 
+  isActive(): boolean {
+    return (this.clientViewData.status.value === 'Active');
+  }
+
   /**
    * Performs action button/option action.
    * @param {string} name action name.

src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html

@@ -15,7 +15,7 @@
       Capture
     </button>
     <button *ngIf="isCaptured" mat-stroked-button color="primary" (click)="recapture()">
-      <fa-icon icon="undo" size="sm"></fa-icon>&nbsp;&nbsp;Recapture
+      <fa-icon icon="undo" size="sm" class="m-r-10"></fa-icon>Recapture
     </button>
   </div>
 

src/app/clients/clients-view/family-members-tab/family-members-tab.component.html

@@ -6,7 +6,7 @@
 
     <div fxLayout="row" fxLayoutAlign="flex-end">
       <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
       </button>
     </div>
 

src/app/clients/clients-view/identities-tab/identities-tab.component.html

@@ -3,7 +3,7 @@
     <h3>Identities</h3>
 
     <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()" *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon> Add
     </button>
 
     <table mat-table #identifiersTable [dataSource]="clientIdentities">

src/app/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']" *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)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
-      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>
       Delete
     </button>
   </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-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>
@@ -100,7 +100,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]="!fixedDepositAccountFormValid">

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html

@@ -21,7 +21,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/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-details-step/fixed-deposit-account-details-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 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/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html

@@ -53,11 +53,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>
@@ -139,7 +139,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/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -180,11 +180,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>
@@ -336,7 +336,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/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component.html

@@ -135,7 +135,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/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-terms-step/fixed-deposit-account-terms-step.component.html

@@ -90,7 +90,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/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -36,11 +36,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/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.html

@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateFixedDepositsAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.html

@@ -29,7 +29,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!approveFixedDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!approveFixedDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.html

@@ -21,7 +21,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateRecurringDepositsAccountForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.html

@@ -30,7 +30,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!approveRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!approveRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.html

@@ -25,7 +25,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!prematureCloseRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!prematureCloseRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.html

@@ -30,7 +30,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectRecurringDepositsAccountForm">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-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>
@@ -101,7 +101,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]="!recurringDepositAccountFormValid">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component.html

@@ -17,7 +17,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/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-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 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/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html

@@ -55,11 +55,11 @@
         <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>
@@ -144,7 +144,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/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -187,11 +187,11 @@
           <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>
@@ -346,7 +346,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/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component.html

@@ -198,7 +198,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/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-terms-step/recurring-deposits-account-terms-step.component.html

@@ -58,7 +58,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/deposits/recurring-deposits/recurring-deposits-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

@@ -37,11 +37,11 @@
           <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/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html

@@ -4,13 +4,13 @@
     <button mat-raised-button color="primary"
       *ngIf="!(transactionData.transactionType.value == 'Transfer' || transactionData.reversed == 'true')"
       [routerLink]="'edit'">
-      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
     </button>
   </span>
   <button mat-raised-button color="warn"
     *mifosxHasPermission="'UNDOTRANSACTION_SAVINGSACCOUNT'"
     (click)="undoTransaction()">
-    <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Undo
+    <fa-icon icon="undo" class="m-r-10"></fa-icon>Undo
   </button>
 </div>
 

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html

@@ -20,7 +20,7 @@
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
         <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-        <button mat-raised-button color="accent" [disabled]="!activateGroupForm.valid">Confirm</button>
+        <button mat-raised-button color="primary" [disabled]="!activateGroupForm.valid">Confirm</button>
       </mat-card-actions>
 
     </form>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -1,6 +1,6 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit Schedule
   </button>
 </div>

src/app/groups/groups.component.html

@@ -9,10 +9,10 @@
     </div>
     <div class="action-button" fxLayoutGap="25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download"></fa-icon>&nbsp;&nbsp;Import Group
+        <fa-icon icon="download" class="m-r-10"></fa-icon>Import Group
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Create Group
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>Create Group
       </button>
     </div>
   </div>

src/app/home/home.component.html

@@ -2,7 +2,7 @@
 
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
-      <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Dashboard' | translate }}
     </button>
   </div>

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-charges-step/glim-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>
@@ -159,7 +159,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>
@@ -167,4 +167,3 @@
       <fa-icon icon="arrow-right"></fa-icon>
     </button>
   </div>
-  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-details-step/glim-details-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 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>
@@ -86,4 +86,3 @@
     </div>
 
   </form>
-  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-preview-step/glim-preview-step.component.html

@@ -261,7 +261,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]="['../']">
@@ -271,4 +271,3 @@
       Submit
     </button>
   </div>
-  

src/app/loans/glim-account/create-glim-account/glim-account-stepper/glim-terms-step/glim-terms-step.component.html

@@ -117,7 +117,7 @@
     </div>
     <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/loans/loans-account-stepper/loans-account-charges-step/loans-account-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>
@@ -120,7 +120,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]="!loansAccountFormValid">

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-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/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html

@@ -91,7 +91,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/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -261,7 +261,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/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html

@@ -10,7 +10,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/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -379,7 +379,7 @@
       <div fxLayout="column" fxFlex="50%">
         <div fxLayout="row" fxLayoutAlign="flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
-            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
           </button>
         </div>
       </div>
@@ -422,7 +422,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/loans/loans-routing.module.ts

@@ -72,242 +72,250 @@ const routes: Routes = [
       },
       {
         path: ':loanId',
-        component: LoansViewComponent,
         data: { title: extract('Loan View'), routeParamBreadcrumb: 'loanId' },
         resolve: {
-          loanDetailsData: LoanDetailsResolver,
+          loanDetailsData: LoanDetailsResolver
-          loanDatatables: LoanDatatablesResolver
         },
         children: [
           {
             path: '',
-            redirectTo: 'general',
+            component: LoansViewComponent,
-            pathMatch: 'full'
+            resolve: {
-          },
+              loanDetailsData: LoanDetailsResolver,
-          {
+              loanDatatables: LoanDatatablesResolver
-            path: 'general',
+            },
-            component: GeneralTabComponent,
+            children: [
-            data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
+              {
-          },
+                path: '',
-          {
+                redirectTo: 'general',
-            path: 'accountdetail',
+                pathMatch: 'full'
-            component: AccountDetailsComponent,
+              },
-            data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
+              {
-          },
+                path: 'general',
-          {
+                component: GeneralTabComponent,
-            path: 'original-schedule',
+                data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-            component: OriginalScheduleTabComponent,
+              },
-            data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+              {
-          },
+                path: 'accountdetail',
-          {
+                component: AccountDetailsComponent,
-            path: 'repayment-schedule',
+                data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-            component: RepaymentScheduleTabComponent,
+              },
-            data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+              {
+                path: 'original-schedule',
+                component: OriginalScheduleTabComponent,
+                data: { title: extract('Original Schedule'), breadcrumb: 'Original Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'repayment-schedule',
+                component: RepaymentScheduleTabComponent,
+                data: { title: extract('Repayment Schedule'), breadcrumb: 'Repayment Schedule', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'transactions',
+                data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
+                children: [
+                  {
+                    path: '',
+                    component: TransactionsTabComponent
+
+                  },
+                  {
+                    path: 'export',
+                    component: ExportTransactionsComponent
+                  }
+                ]
+              },
+              {
+                path: 'delinquencytags',
+                data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: LoanDelinquencyTagsTabComponent
+                  },
+                ]
+              },
+              {
+                path: 'loan-reschedules',
+                data: {},
+                resolve: {
+                  loanRescheduleData: LoanReschedulesResolver
+                },
+                children: [
+                  {
+                    path: '',
+                    component: RescheduleLoanTabComponent
+                  }
+                ]
+              },
+              {
+                path: 'loan-collateral',
+                component: LoanCollateralTabComponent,
+                data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'loan-tranche-details',
+                component: LoanTrancheDetailsComponent,
+                data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'overdue-charges',
+                component: OverdueChargesTabComponent,
+                data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'floating-interest-rates',
+                component: FloatingInterestRatesComponent,
+                data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
+              },
+              {
+                path: 'charges',
+                data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
+                component: ChargesTabComponent,
+              },
+              {
+                path: 'loan-documents',
+                component: LoanDocumentsTabComponent,
+                data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
+                resolve: {
+                  loanDocuments: LoanDocumentsResolver
+                },
+              },
+              {
+                path: 'notes',
+                component: NotesTabComponent,
+                data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
+                resolve: {
+                  loanNotes: LoanNotesResolver
+                },
+              },
+              {
+                path: 'standing-instruction',
+                component: StandingInstructionsTabComponent,
+                data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
+              },
+              {
+                path: 'datatables',
+                children: [{
+                  path: ':datatableName',
+                  component: DatatableTabComponent,
+                  data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
+                  resolve: {
+                    loanDatatable: LoanDatatableResolver
+                  }
+                }]
+              },
+            ],
           },
           {
             path: 'transactions',
             data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-            children: [
-              {
-                path: '',
-                component: TransactionsTabComponent
-
-              },
-              {
-                path: 'export',
-                component: ExportTransactionsComponent
-              }
-            ]
-          },
-          {
-            path: 'delinquencytags',
-            data: { title: extract('Loans Delinquency Tags'), breadcrumb: 'Delinquency Tags', routeParamBreadcrumb: false },
             resolve: {
-              loanDelinquencyTagsData: LoanDelinquencyTagsResolver
+              loanDetailsAssociationData: LoanDetailsResolver
             },
             children: [
               {
                 path: '',
-                component: LoanDelinquencyTagsTabComponent
+                redirectTo: '../transactions', pathMatch: 'prefix'
               },
-            ]
-          },
-          {
-            path: 'loan-reschedules',
-            data: {},
-            resolve: {
-              loanRescheduleData: LoanReschedulesResolver
-            },
-            children: [
               {
-                path: '',
+                path: ':id',
-                component: RescheduleLoanTabComponent
+                data: { routeParamBreadcrumb: 'id' },
+                children: [
+                  {
+                    path: '',
+                    component: ViewTransactionComponent,
+                    resolve: {
+                      loansAccountTransaction: LoansAccountTransactionResolver
+                    }
+                  },
+                  {
+                    path: 'edit',
+                    component: EditTransactionComponent,
+                    data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                    }
+                  },
+                  {
+                    path: 'reciept',
+                    component: ViewRecieptComponent,
+                    data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
+                    resolve: {
+                      loansTransactionReciept: LoansTransactionRecieptResolver
+                    }
+                  }
+                ]
               }
             ]
           },
-          {
-            path: 'loan-collateral',
-            component: LoanCollateralTabComponent,
-            data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'loan-tranche-details',
-            component: LoanTrancheDetailsComponent,
-            data: { title: extract('Loan Tranche Details'), breadcrumb: 'Loan Tranche Details', routeParamBreadcrumb: false },
-          },
-          {
-            path: 'overdue-charges',
-            component: OverdueChargesTabComponent,
-            data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'floating-interest-rates',
-            component: FloatingInterestRatesComponent,
-            data: { title: extract('Floating Interest Rates'), breadcrumb: 'Floating Interest Rates', routeParamBreadcrumb: false },
-          },
           {
             path: 'charges',
             data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-            component: ChargesTabComponent,
-          },
-          {
-            path: 'loan-documents',
-            component: LoanDocumentsTabComponent,
-            data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
-            resolve: {
-              loanDocuments: LoanDocumentsResolver
-            },
-          },
-          {
-            path: 'notes',
-            component: NotesTabComponent,
-            data: { title: extract('Notes'), breadcrumb: 'Notes', routeParamBreadcrumb: false },
-            resolve: {
-              loanNotes: LoanNotesResolver
-            },
-          },
-          {
-            path: 'standing-instruction',
-            component: StandingInstructionsTabComponent,
-            data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-          },
-          {
-            path: 'datatables',
-            children: [{
-              path: ':datatableName',
-              component: DatatableTabComponent,
-              data: { title: extract('Data Table View'), routeParamBreadcrumb: 'datatableName' },
-              resolve: {
-                loanDatatable: LoanDatatableResolver
-              }
-            }]
-          },
-        ],
-      },
-      {
-        path: 'transactions',
-        data: { title: extract('Loans Account Transactions'), breadcrumb: 'Transactions', routeParamBreadcrumb: false },
-        resolve: {
-          loanDetailsAssociationData: LoanDetailsResolver
-        },
-        children: [
-          {
-            path: '',
-            redirectTo: '../transactions', pathMatch: 'prefix'
-          },
-          {
-            path: ':id',
-            data: { routeParamBreadcrumb: 'id' },
             children: [
               {
                 path: '',
-                component: ViewTransactionComponent,
+                redirectTo: '../charges', pathMatch: 'prefix'
-                resolve: {
-                  loansAccountTransaction: LoansAccountTransactionResolver
-                }
               },
               {
-                path: 'edit',
+                path: ':id',
-                component: EditTransactionComponent,
+                data: { routeParamBreadcrumb: 'id' },
-                data: { breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                component: ViewChargeComponent,
                 resolve: {
-                  loansAccountTransactionTemplate: LoansAccountTransactionTemplateResolver
+                  loansAccountCharge: LoansAccountChargeResolver,
-                }
+                  loanDetailsData: LoanDetailsResolver
-              },
-              {
-                path: 'reciept',
-                component: ViewRecieptComponent,
-                data: { breadcrumb: 'Reciept', routeParamBreadcrumb: false },
-                resolve: {
-                  loansTransactionReciept: LoansTransactionRecieptResolver
                 }
               }
             ]
-          }
-        ]
-      },
-      {
-        path: 'charges',
-        data: { title: extract('Loans Account Charges'), breadcrumb: 'Charges', routeParamBreadcrumb: false },
-        children: [
-          {
-            path: '',
-            redirectTo: '../charges', pathMatch: 'prefix'
           },
           {
-            path: ':id',
+            path: 'actions/:action',
-            data: { routeParamBreadcrumb: 'id' },
+            component: LoanAccountActionsComponent,
-            component: ViewChargeComponent,
+            data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
             resolve: {
-              loansAccountCharge: LoansAccountChargeResolver,
+              actionButtonData: LoanActionButtonResolver
-              loanDetailsData: LoanDetailsResolver
             }
-          }
+          },
+          {
+            path: 'transfer-funds',
+            loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+          },
+          {
+            path: 'edit-loans-account',
+            data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+            component: EditLoansAccountComponent,
+            resolve: {
+              loansAccountAndTemplate: LoansAccountAndTemplateResolver
+            }
+          },
         ]
       },
       {
-        path: 'actions/:action',
+        path: 'glim-account',
-        component: LoanAccountActionsComponent,
+        children: [
-        data: { title: extract('Loan Account Actions'), breadcrumb: 'action', routeParamBreadcrumb: 'action' },
+          {
-        resolve: {
+            path: 'create',
-          actionButtonData: LoanActionButtonResolver
+            data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
-        }
+            component: CreateGlimAccountComponent,
-      },
+            resolve: {
-      {
+              loansAccountTemplate: GLIMLoanTemplateResolver,
-        path: 'transfer-funds',
+              gsimData: GSIMAccountsResolver,
-        loadChildren: () => import('../account-transfers/account-transfers.module').then(m => m.AccountTransfersModule)
+              groupsData: GroupViewResolver,
-      },
+            },
-      {
+          },
-        path: 'edit-loans-account',
+          {
-        data: { title: extract('Modify Loans Account'), breadcrumb: 'Modify Loans Account', routeParamBreadcrumb: 'Edit' },
+            path: ':glimId',
-        component: EditLoansAccountComponent,
+            data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        resolve: {
+            component: GlimAccountComponent,
-          loansAccountAndTemplate: LoansAccountAndTemplateResolver
+            resolve: {
-        }
+              glimData: GLIMViewResolver,
-      },
+              groupsData: GroupAccountsResolver
-    ]
+            },
-  },
+          }
-  {
+        ]
-    path: 'glim-account',
-    children: [
-      {
-        path: 'create',
-        data: { title: extract('Create GLIM Application'), breadcrumb: 'Create GLIM Application' },
-        component: CreateGlimAccountComponent,
-        resolve: {
-          loansAccountTemplate: GLIMLoanTemplateResolver,
-          gsimData: GSIMAccountsResolver,
-          groupsData: GroupViewResolver,
-        },
-      },
-      {
-        path: ':glimId',
-        data: { title: extract('GSIM Account View'), routeParamBreadcrumb: 'savingAccountId' },
-        component: GlimAccountComponent,
-        resolve: {
-          glimData: GLIMViewResolver,
-          groupsData: GroupAccountsResolver
-        },
       }
     ]
   }

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html

@@ -25,7 +25,7 @@
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
           <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
           <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-            <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+            <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report
           </button>
         </mat-card-actions>
 
@@ -43,7 +43,7 @@
 
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file" class="m-r-10"></fa-icon>
         Print
       </button>
     </div>

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html

@@ -156,16 +156,16 @@
             <span *ngIf="!guarantor.guarantorFundingDetails">
               <button mat-raised-button class="account-action-button" color="primary"
                 *mifosxHasPermission="'READ_SAVINGSACCOUNT'" (click)="viewGuarantorDetails(guarantor)">
-                <fa-icon icon="eye"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="eye" class="m-r-10"></fa-icon>
               </button>
               <button mat-raised-button class="account-action-button" color="primary"
                 *ngIf="guarantor.status && guarantor.guarantorType.id == 3 && guarantor.id">
-                <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+                <fa-icon icon="edit" class="m-r-10"></fa-icon>
               </button>
               <span *ngIf="guarantor.status">
                 <button mat-raised-button class="account-action-button" color="warn"
                   *mifosxHasPermission="'DELETE_GUARANTOR'" (click)="deleteGuarantor(guarantor.id)">
-                  <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+                  <fa-icon icon="trash" class="m-r-10"></fa-icon>
                 </button>
               </span>
             </span>

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

@@ -10,7 +10,7 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
     <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()"
       (click)="addDisbursementDataEntry()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
     <button mat-raised-button color="primary" *ngIf="!pristine"
       (click)="editDisbursementData()">

src/app/loans/loans-view/loans-view.component.html

@@ -192,7 +192,9 @@
         </a>
       </ng-container>
     </nav>
+
     <router-outlet></router-outlet>
+
   </mat-card-content>
 
 </mat-card>

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html

@@ -40,21 +40,6 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="updatedOnDate">
-      <th mat-header-cell *matHeaderCellDef> Updated On </th>
-      <td mat-cell *matCellDef="let item">
-        <span *ngIf="item.statusEnum.pendingApproval">
-          {{ item.timeline.submittedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.approved">
-          {{ item.timeline.approvedOnDate | dateFormat }}
-        </span>
-        <span *ngIf="item.statusEnum.rejected">
-          {{ item.timeline.rejectedOnDate | dateFormat }}
-        </span>
-      </td>
-    </ng-container>
-
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let item">

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts

@@ -14,7 +14,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 export class RescheduleLoanTabComponent implements OnInit {
 
   loanRescheduleData: any;
-  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'updatedOnDate', 'actions'];
+  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'actions'];
   clientId: any;
 
   constructor(private route: ActivatedRoute,

src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html

@@ -27,7 +27,7 @@
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
     <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs"></fa-icon>&nbsp;&nbsp;Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
   </div>
 
 </form>

src/app/login/reset-password/reset-password.component.html

@@ -6,7 +6,7 @@
 
   <mat-form-field fxFlexAlign="center" class="reset-password-input">
     <span matPrefix>
-      <fa-icon icon="lock" size="lg"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock" size="lg" class="m-r-10"></fa-icon>
     </span>
     <mat-label>Password</mat-label>
     <input type="{{ passwordInputType }}" matInput required formControlName="password">
@@ -22,7 +22,7 @@
 
   <mat-form-field fxFlexAlign="center" class="reset-password-input">
     <span matPrefix>
-      <fa-icon icon="check-circle" size="lg"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="check-circle" size="lg" class="m-r-10"></fa-icon>
     </span>
     <mat-label>Confirm Password</mat-label>
     <input type="password" matInput required formControlName="repeatPassword">

src/app/login/two-factor-authentication/two-factor-authentication.component.html

@@ -30,7 +30,7 @@
 
   <mat-form-field fxFlexAlign="center" class="two-factor-auth-input">
     <span matPrefix>
-      <fa-icon icon="user-shield"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="user-shield" class="m-r-10"></fa-icon>
     </span>
     <mat-label>OTP</mat-label>
     <input type="password" matInput autocomplete="off" required formControlName="otp">

src/app/organization/adhoc-query/adhoc-query.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_ADHOC'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create AdHoc Query
   </button>
 </div>

src/app/organization/adhoc-query/view-adhoc-query/view-adhoc-query.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_ADHOC'">
-    <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)="deleteAdhocQuery()" *mifosxHasPermission="'DELETE_ADHOC'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/organization/currencies/currencies.component.html

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

src/app/organization/employees/employees.component.html

@@ -2,13 +2,13 @@
 
   <div #buttonImportEmployees>
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
-    <fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="upload" class="m-r-10"></fa-icon>
     Import Employees
   </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Employee
   </button>
   </div>

src/app/organization/employees/view-employee/view-employee.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]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="edit" class="m-r-10"></fa-icon>
     Edit
   </button>
 </div>

src/app/organization/entity-data-table-checks/entity-data-table-checks.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]="['create']" *mifosxHasPermission="'CREATE_ENTITY_DATATABLE_CHECK'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create
   </button>
 
@@ -54,7 +54,7 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let entityDataTableCheck">
           <button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn" *mifosxHasPermission="'DELETE_ENTITY_DATATABLE_CHECK'">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
           </button>
         </td>
       </ng-container>

src/app/organization/holidays/holidays.component.html

@@ -2,7 +2,7 @@
 
   <div #buttonCreateHoliday class="in-block">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Holiday
   </button>
   </div>

src/app/organization/holidays/view-holidays/view-holidays.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
     <span *mifosxHasPermission="'ACTIVATE_HOLIDAY'">
     <button mat-raised-button color="accent" (click)="activateHoliday()" *ngIf="holidayData.status.value !== 'Active'">
-      <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
       Activate
     </button>
   </span>
     <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOLIDAY'">
-    <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)="deleteHoliday()" *mifosxHasPermission="'DELETE_HOLIDAY'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -71,7 +71,7 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
-              <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>
               Edit
             </button>
           </td>

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -71,7 +71,7 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
-              <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+              <fa-icon icon="edit" class="m-r-10"></fa-icon>
               Edit
             </button>
           </td>

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.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_PROVISIONING_CRITERIA'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Provisioning Criteria
   </button>
 </div>

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.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_CRITERIA'">
-    <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)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>

src/app/organization/payment-types/payment-types.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]="['create']" *mifosxHasPermission="'CREATE_PAYMENTTYPE'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create Payment Type
   </button>
 
@@ -64,10 +64,10 @@
         <th mat-header-cell *matHeaderCellDef> Actions </th>
         <td mat-cell *matCellDef="let paymentType">
           <button mat-button [routerLink]="[paymentType.id, 'edit']" color="primary" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+            <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
           </button>
           <button mat-button (click)="deletePaymentType(paymentType.id)" color="warn" *ngIf="!paymentType.isSystemDefined">
-            <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+            <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
           </button>
         </td>
       </ng-container>

src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html

@@ -16,7 +16,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]="!smsCampaignFormValid">

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html

@@ -55,7 +55,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/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html

@@ -109,7 +109,7 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%"
     *ngIf="!smsCampaignDetailsForm.controls.runReportId.value">
     <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/organization/sms-campaigns/sms-campaigns.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]="['create']" *mifosxHasPermission="'CREATE_SMSCAMPAIGN'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     Create SMS Campaign
   </button>
 

src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html

@@ -4,31 +4,31 @@
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
-        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;Edit
+        <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'Pending'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'ACTIVATE_SMSCAMPAIGN'" (click)="activateCampaign()">
-        <fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;Activate
+        <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Activate
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'CLOSE_SMSCAMPAIGN'" (click)="closeCampaign()">
-        <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Close
+        <fa-icon icon="times" class="m-r-10"></fa-icon>Close
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'Pending' && smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="accent" *mifosxHasPermission="'REACTIVATE_SMSCAMPAIGN'" (click)="reactivateCampaign()">
-        <fa-icon icon="undo"></fa-icon>&nbsp;&nbsp;Reactivate
+        <fa-icon icon="undo" class="m-r-10"></fa-icon>Reactivate
       </button>
     </span>
 
     <span *ngIf="smsCampaignData.campaignStatus.value === 'closed'">
       <button mat-raised-button color="warn" *mifosxHasPermission="'DELETE_SMSCAMPAIGN'" (click)="deleteCampaign()">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
       </button>
     </span>
 
@@ -105,7 +105,7 @@
 
                 <div class="search-button" >
                   <button mat-raised-button color="primary">
-                  <fa-icon icon="search"></fa-icon>&nbsp;&nbsp;Search</button>
+                  <fa-icon icon="search" class="m-r-10"></fa-icon>Search</button>
                 </div>
               </div>
 

src/app/organization/tellers/cashiers/cashiers.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]="['create']" *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'">
-    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
     New Cashier
   </button>
 

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -1,10 +1,10 @@
 <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
   <button mat-raised-button color="accent" [routerLink]="['../allocate']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
-      <fa-icon icon="arrow-up"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-up" class="m-r-10"></fa-icon>
       Allocate Cash
   </button>
   <button mat-raised-button color="warn" [routerLink]="['../settle']" *mifosxHasPermission="'SETTLECASHFROMCASHIER_TELLER'">
-      <fa-icon icon="arrow-down"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-down" class="m-r-10"></fa-icon>
       Settle Cash
   </button>
 </div>

src/app/organization/tellers/cashiers/view-cashier/view-cashier.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_CASHIER'">
-    <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)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>
     Delete
   </button>
 </div>