Issue #SB-7871 feat: TOC Icons changes

src/app/client/src/app/modules/shared/components/collection-tree/collection-tree.component.html

-<sui-accordion *ngFor="let child of rootChildrens"  class="ui styled accordion mt-10  width-100">
-  <sui-accordion-panel [ngClass]="child.extraClasses" (click)="!child.folder && onNodeClick(child)" [(isOpen)]="child.togglePanelIcon" [isDisabled]="(!child.children.length) || (!child.folder)">
+<sui-accordion 
+  *ngFor="let child of rootChildrens" 
+  class="ui styled accordion mt-10 width-100"
+  >
+  <sui-accordion-panel 
+    [ngClass]="child.extraClasses" 
+    (click)="!child.folder && onNodeClick(child)"
+    [(isOpen)]="child.togglePanelIcon" 
+    [isDisabled]="(!child.children.length) || (!child.folder)"
+    >
     <div title class="accordian-left-text">
-      <i *ngIf="child.folder" class="fa fa-2x mr-10 vertical-align-middle" [class.fa-folder-open-o]="child.togglePanelIcon" [class.fa-folder-o]="!child.togglePanelIcon"></i>
-      <i *ngIf="!child.folder" class="fa fa-2x mr-10 vertical-align-middle" [ngClass]="child.icon"></i>
-      <span [innerHTML]="child.title" class="d-inline-block mt-5"></span>
-      <i *ngIf="child.folder && child.children.length" class="icon right-float accordion-content-right" [class.plus]="!child.togglePanelIcon" [class.minus]="child.togglePanelIcon"></i>
+      <i 
+        *ngIf="child.folder" 
+        class="mr-10 vertical-align-middle" 
+        [class.sb-icon-folder]="child.togglePanelIcon" 
+        [class.sb-icon-collection]="!child.togglePanelIcon"
+        ></i>
+      <i 
+        *ngIf="!child.folder" 
+        class="mr-10 vertical-align-middle" 
+        [ngClass]="child.icon"
+        ></i>
+      <span 
+        [innerHTML]="child.title" 
+        class="d-inline-block mt-5"
+        ></span>
+      <i 
+        *ngIf="child.folder && child.children.length" 
+        class="icon right-float accordion-content-right" 
+        [class.plus]="!child.togglePanelIcon" 
+        [class.minus]="child.togglePanelIcon"
+        ></i>
     </div>
-    <div *ngIf="child.folder" content>
-      <app-fancy-tree (itemSelect)="onItemSelect($event)" [nodes]="child.children" [options]="{ showConnectors: true }"></app-fancy-tree>
+    <div 
+      *ngIf="child.folder" 
+      content
+      >
+      <app-fancy-tree 
+        (itemSelect)="onItemSelect($event)" 
+        [nodes]="child.children" 
+        [options]="{ showConnectors: true }"
+        ></app-fancy-tree>
     </div>
   </sui-accordion-panel>
 </sui-accordion>
\ No newline at end of file

src/app/client/src/app/modules/shared/components/fancy-tree/fancy-tree.component.ts

@@ -21,8 +21,8 @@ export class FancyTreeComponent implements AfterViewInit {
       glyph: {
         preset: 'awesome4',
         map: {
-          folder: 'fa fa-folder-o fa-lg',
-          folderOpen: 'fa fa-folder-open-o fa-lg'
+          folder: 'sb-icon-collection',
+          folderOpen: 'sb-icon-folder'
         }
       },
       click: (event, data): boolean => {

src/app/client/src/app/modules/shared/services/config/app.config.json

@@ -1025,18 +1025,18 @@
     }
   },
   "collectionTreeOptions": {
-    "fileIcon": "fa fa-file-o fa-lg",
+    "fileIcon": "sb-icon-content",
     "customFileIcon": {
-      "video": "fa fa-file-video-o fa-lg",
-      "pdf": "fa fa-file-pdf-o fa-lg",
-      "youtube": "fa fa-youtube fa-lg fancy_tree_red",
-      "H5P": "fa fa-html5 fa-lg",
-      "audio": "fa fa-file-audio-o fa-lg",
-      "ECML": "fa fa-file-code-o fa-lg",
-      "HTML": "fa fa-html5 fa-lg",
-      "collection": "fa fa-file-archive-o fa-lg",
-      "epub": "fa fa-file-text fa-lg",
-      "doc": "fa fa-file-text fa-lg"
+      "video": "sb-icon-video",
+      "pdf": "sb-icon-doc",
+      "youtube": "sb-icon-video",
+      "H5P": "sb-icon-content",
+      "audio": "sb-icon-mp3",
+      "ECML": "sb-icon-content",
+      "HTML": "sb-icon-content",
+      "collection": "sb-icon-collection",
+      "epub": "sb-icon-doc",
+      "doc": "sb-icon-doc"
     }
   },
   "mediumCode":{