ReliefApplications · AntoineRelief · Dec 22, 2023 · Dec 20, 2023 · Dec 20, 2023 · Dec 21, 2023
diff --git a/apps/back-office/src/app/dashboard/pages/reference-data/reference-data.component.html b/apps/back-office/src/app/dashboard/pages/reference-data/reference-data.component.html
@@ -146,37 +146,41 @@ <h1 class="overflow-hidden whitespace-nowrap text-ellipsis mb-0">
               <button
                 kendoButton
                 class="text-center"
-                icon="edit"
                 [look]="'flat'"
                 (click)="toggleInlineEditor(dataItem)"
                 [uiTooltip]="'common.edit' | translate"
-              ></button>
+              >
+                <kendo-icon name="edit"></kendo-icon>
+              </button>
               <button
                 kendoButton
                 class="text-center"
-                icon="delete"
                 [look]="'flat'"
                 (click)="onRemoveField(dataItem)"
                 [uiTooltip]="'common.remove' | translate"
-              ></button>
+              >
+                <kendo-icon name="delete"></kendo-icon>
+              </button>
             </div>
             <div [ngClass]="{ hidden: currEditingField !== dataItem }">
               <button
                 kendoButton
                 class="text-center"
-                icon="save"
                 [look]="'flat'"
                 (click)="toggleInlineEditor(null)"
                 [uiTooltip]="'common.save' | translate"
-              ></button>
+              >
+                <kendo-icon name="save"></kendo-icon>
+              </button>
               <button
                 kendoButton
                 class="text-center"
-                icon="cancel"
                 [look]="'flat'"
                 (click)="currEditingField = null"
                 [uiTooltip]="'common.cancel' | translate"
-              ></button>
+              >
+                <kendo-icon name="cancel"></kendo-icon>
+              </button>
             </div>
           </ng-template>
         </kendo-grid-column>
@@ -189,9 +193,9 @@ <h1 class="overflow-hidden whitespace-nowrap text-ellipsis mb-0">
       <button
         kendoButton
         class="text-center mt-2"
-        icon="add"
         (click)="addField()"
       >
+        <kendo-icon name="add"></kendo-icon>
         {{ 'components.referenceData.fields.add' | translate }}
       </button>
     </div>

diff --git a/apps/back-office/src/app/dashboard/pages/reference-data/reference-data.module.ts b/apps/back-office/src/app/dashboard/pages/reference-data/reference-data.module.ts
@@ -25,6 +25,7 @@ import {
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * Reference Data page module.
@@ -54,6 +55,7 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
     AlertModule,
     InputsModule,
     DropDownsModule,
+    IconsModule,
   ],
 })
 export class ReferenceDataModule {}
diff --git a/libs/shared/src/lib/components/ui/core-grid/date-filter-menu/date-filter-menu.component.html b/libs/shared/src/lib/components/ui/core-grid/date-filter-menu/date-filter-menu.component.html
@@ -71,15 +71,16 @@
       <button
         type="button"
         kendoButton
-        icon="refresh"
         [title]="
           (dateModeProperty === 'expression'
             ? 'components.queryBuilder.tooltip.filter.date.usePicker'
             : 'components.queryBuilder.tooltip.filter.date.useExpression'
           ) | translate
         "
         (click)="$event.stopPropagation(); setDateModeType(dateMode)"
-      ></button>
+      >
+        <kendo-icon name="refresh"></kendo-icon>
+      </button>
     </div>
   </ng-container>
 </ng-template>
diff --git a/libs/shared/src/lib/components/ui/core-grid/date-filter-menu/date-filter-menu.module.ts b/libs/shared/src/lib/components/ui/core-grid/date-filter-menu/date-filter-menu.module.ts
@@ -7,6 +7,7 @@ import { ButtonModule, ButtonsModule } from '@progress/kendo-angular-buttons';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { InputsModule } from '@progress/kendo-angular-inputs';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * Custom date filter menu for core grids.
@@ -23,6 +24,7 @@ import { InputsModule } from '@progress/kendo-angular-inputs';
     DropDownsModule,
     InputsModule,
     DateInputsModule,
+    IconsModule,
   ],
   exports: [DateFilterMenuComponent],
 })

diff --git a/libs/shared/src/lib/components/ui/core-grid/filter/filter.component.html b/libs/shared/src/lib/components/ui/core-grid/filter/filter.component.html
@@ -33,6 +33,6 @@
     (itemClick)="onChangeOperator($event)"
   ></kendo-dropdownbutton>
   <button kendoButton *ngIf="selectedValue" (click)="onClear()">
-    <span class="k-icon k-i-filter-clear"></span>
+    <span class="k-icon k-font-icon k-i-filter-clear"></span>
   </button>
 </div>
diff --git a/libs/shared/src/lib/components/ui/core-grid/grid/grid.component.html b/libs/shared/src/lib/components/ui/core-grid/grid/grid.component.html
@@ -53,8 +53,9 @@
       #anchor
       fillMode="flat"
       (click)="toggleColumnChooser(anchor.element, columnChooser)"
-      icon="columns"
-    ></kendo-button>
+    >
+      <kendo-icon name="columns"></kendo-icon>
+    </kendo-button>
     <ng-template #columnChooser>
       <shared-grid-column-chooser
         [originalColumns]="grid?.columns"
@@ -86,9 +87,9 @@
       *ngIf="filterable"
       [uiTooltip]="'components.widget.grid.filter.toggle' | translate"
       kendoButton
-      icon="eye"
       (click)="onToggleFilter()"
     >
+      <kendo-icon name="eye"></kendo-icon>
       {{
         (showFilter ? 'common.filter.hide' : 'common.filter.show') | translate
       }}
@@ -221,11 +222,12 @@
               <button
                 kendoButton
                 *ngIf="dataItem.showFullScreenButton[field.name]"
-                icon="hyperlink-open-sm"
                 (click)="onExpandText(dataItem, field.name)"
                 [look]="'flat'"
                 [uiTooltip]="'common.viewFullscreen' | translate"
-              ></button>
+              >
+                <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+              </button>
             </div>
           </ng-template>
           <!-- DISPLAY ( date / datetime / time ) -->
@@ -277,11 +279,12 @@
               <button
                 kendoButton
                 *ngIf="dataItem.showFullScreenButton[field.name]"
-                icon="hyperlink-open-sm"
                 (click)="onExpandText(dataItem, field.name)"
                 [look]="'flat'"
                 [uiTooltip]="'common.openFullScreen' | translate"
-              ></button>
+              >
+                <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+              </button>
             </div>
           </ng-template>
           <ng-template
@@ -308,11 +311,12 @@
               <button
                 kendoButton
                 *ngIf="dataItem.showFullScreenButton[field.name]"
-                icon="hyperlink-open-sm"
                 (click)="onExpandText(dataItem, field.name)"
                 [look]="'flat'"
                 [uiTooltip]="'common.openFullScreen' | translate"
-              ></button>
+              >
+                <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+              </button>
             </div>
           </ng-template>
           <ng-template
@@ -339,11 +343,12 @@
               <button
                 kendoButton
                 *ngIf="dataItem.showFullScreenButton[field.name]"
-                icon="hyperlink-open-sm"
                 (click)="onExpandText(dataItem, field.name)"
                 [look]="'flat'"
                 [uiTooltip]="'common.viewFullscreen' | translate"
-              ></button>
+              >
+                <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+              </button>
             </div>
           </ng-template>
           <!-- DISPLAY ( boolean ) -->
@@ -382,11 +387,12 @@
               <button
                 kendoButton
                 *ngIf="dataItem.showFullScreenButton[field.name]"
-                icon="hyperlink-open-sm"
                 (click)="onExpandText(dataItem, field.name)"
                 [look]="'flat'"
                 [uiTooltip]="'common.viewFullscreen' | translate"
-              ></button>
+              >
+                <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+              </button>
             </div>
           </ng-template>
           <!-- DISPLAY ( color ) -->
@@ -609,11 +615,12 @@
                 </div>
                 <!-- <button
                   kendoButton
-                  icon="hyperlink-open-sm"
                   (click)="openReferenceDataSelector(field)"
                   [look]="'flat'"
                   [uiTooltip]="'common.edit' | translate"
-                ></button> -->
+                >
+                  <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+                </button> -->
               </div>
             </ng-template>
           </kendo-grid-column>
@@ -1018,11 +1025,12 @@
         <button
           class="text-center"
           kendoButton
-          icon="detail-section"
           [look]="'flat'"
           (click)="action.emit({ action: 'details', items: dataItem })"
           [uiTooltip]="'components.widget.grid.actions.detail' | translate"
-        ></button>
+        >
+          <kendo-icon name="detail-section"></kendo-icon>
+        </button>
       </ng-template>
     </kendo-grid-column>
     <!-- Go to page ( navigateToPage action ) -->
@@ -1038,7 +1046,6 @@
         <button
           class="text-center"
           kendoButton
-          icon="hyperlink-open-sm"
           [look]="'flat'"
           (click)="
             action.emit({
@@ -1049,7 +1056,9 @@
             })
           "
           [uiTooltip]="'components.widget.grid.actions.goTo' | translate"
-        ></button>
+        >
+          <kendo-icon name="hyperlink-open-sm"></kendo-icon>
+        </button>
       </ng-template>
     </kendo-grid-column>
     <!-- ROW ACTIONS -->
@@ -1074,30 +1083,33 @@
         <button
           *ngIf="dataItem.validationErrors"
           kendoButton
-          icon="error"
           look="flat"
           class="k-color-error"
           (click)="showErrors(dataItem)"
           [uiTooltip]="
             'components.widget.grid.tooltip.uploadFailed' | translate
           "
-        ></button>
+        >
+          <kendo-icon name="error"></kendo-icon>
+        </button>
         <span
           *ngIf="dataItem.saved === false && !dataItem.validationErrors"
           kendoButton
-          icon="exclamation-circle"
           look="flat"
           class="k-color-warning cursor-default"
           [uiTooltip]="'components.widget.grid.tooltip.unsaved' | translate"
-        ></span>
+        >
+          <kendo-icon name="exclamation-circle"></kendo-icon>
+        </span>
         <span
           *ngIf="dataItem.saved"
           kendoButton
-          icon="check-outline"
           look="flat"
           class="k-color-success cursor-default"
           [uiTooltip]="'components.widget.grid.tooltip.saved' | translate"
-        ></span>
+        >
+          <kendo-icon name="check-outline"></kendo-icon>
+        </span>
       </ng-template>
     </kendo-grid-column>
   </ng-container>

diff --git a/libs/shared/src/lib/components/ui/core-grid/grid/grid.module.ts b/libs/shared/src/lib/components/ui/core-grid/grid/grid.module.ts
@@ -23,6 +23,7 @@ import { GridToolbarModule } from '../toolbar/toolbar.module';
 import { GridComponent } from './grid.component';
 import { GridFilterModule } from '../filter/filter.module';
 import { GridFilterMenuModule } from '../filter-menu/filter-menu.module';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /** Module for the grid component */
 @NgModule({
@@ -40,6 +41,7 @@ import { GridFilterMenuModule } from '../filter-menu/filter-menu.module';
     DateInputsModule,
     DropDownsModule,
     ButtonsModule,
+    IconsModule,
     // === UTILS ===
     ExpandedCommentModule,
     // === FILTER ===

diff --git a/libs/shared/src/lib/components/ui/core-grid/grid/utils/grid-data-formatter.ts b/libs/shared/src/lib/components/ui/core-grid/grid/utils/grid-data-formatter.ts
@@ -139,7 +139,7 @@ export function formatGridRowData(
                     [file.name]: text,
                   },
                 });
-                const icon = 'k-icon ' + getFileIcon(file.name);
+                const icon = 'k-icon k-font-icon ' + getFileIcon(file.name);
                 Object.assign(iconObj.icon, {
                   [file.name]: icon,
                 });

diff --git a/libs/shared/src/lib/components/ui/core-grid/row-actions/row-actions.component.html b/libs/shared/src/lib/components/ui/core-grid/row-actions/row-actions.component.html
@@ -2,10 +2,11 @@
   *ngIf="display"
   kendoButton
   class="text-center"
-  icon="more-vertical"
   [look]="'flat'"
   [uiMenuTriggerFor]="menu"
-></button>
+>
+  <kendo-icon name="more-vertical"></kendo-icon>
+</button>
 <ui-menu #menu>
   <button
     *ngIf="actions.update && item.canUpdate"

diff --git a/libs/shared/src/lib/components/ui/core-grid/row-actions/row-actions.module.ts b/libs/shared/src/lib/components/ui/core-grid/row-actions/row-actions.module.ts
@@ -4,11 +4,18 @@ import { GridRowActionsComponent } from './row-actions.component';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { MenuModule } from '@oort-front/ui';
 import { TranslateModule } from '@ngx-translate/core';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /** Module for the grid row actions component */
 @NgModule({
   declarations: [GridRowActionsComponent],
-  imports: [CommonModule, ButtonModule, MenuModule, TranslateModule],
+  imports: [
+    CommonModule,
+    ButtonModule,
+    MenuModule,
+    TranslateModule,
+    IconsModule,
+  ],
   exports: [GridRowActionsComponent],
 })
 export class GridRowActionsModule {}
diff --git a/libs/shared/src/lib/components/users/components/invite-users/invite-users.component.html b/libs/shared/src/lib/components/users/components/invite-users/invite-users.component.html
@@ -104,10 +104,11 @@ <h3 class="font-semibold">
           <button
             kendoButton
             class="text-center"
-            icon="delete"
             [look]="'flat'"
             (click)="onRemove(idx)"
-          ></button>
+          >
+            <kendo-icon name="delete"></kendo-icon>
+          </button>
         </ng-template>
       </kendo-grid-column>
     </kendo-grid>

diff --git a/libs/shared/src/lib/components/users/components/invite-users/invite-users.module.ts b/libs/shared/src/lib/components/users/components/invite-users/invite-users.module.ts
@@ -10,6 +10,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { UploadsModule } from '@progress/kendo-angular-upload';
 import { ButtonModule as uiButtonModule, TextareaModule } from '@oort-front/ui';
 import { DialogModule } from '@oort-front/ui';
+import { IconModule } from '@progress/kendo-angular-icons';
 
 /** Module for invite users component */
 @NgModule({
@@ -29,6 +30,7 @@ import { DialogModule } from '@oort-front/ui';
     DialogModule,
     TextareaModule,
     uiButtonModule,
+    IconModule,
   ],
   exports: [InviteUsersComponent],
 })