[CST-16756] use the drag-icon as a svg mask instead of a fontawesome icon

Author: Andrea Barbasso

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -89,7 +89,7 @@
                   [class.disabled]="isOnlyValue || saving" [dsBtnDisabled]="isOnlyValue || saving"
                   [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
-            <i class="fas fa-grip-vertical fa-fw"></i>
+            <i class="drag-icon"></i>
           </button>
         </div>
       </div>

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -81,8 +81,7 @@
                     scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
                     <div class="drag-handle text-muted float-start p-1 me-2 d-inline" tabindex="0" cdkDragHandle
                       (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
-                      <i class="fas fa-grip-vertical fa-fw"
-                      [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+                      <i class="drag-icon" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
                     </div>
                     <span class="dont-break-out">{{ entry.name }}</span>
                   </th>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -26,7 +26,7 @@
             (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)"
             (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')"
             (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')">
-            <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
+            <i class="drag-icon" [class.drag-disable]="dragDisabled" aria-hidden="true"></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           @for (_model of groupModel.group; track _model) {

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -28,14 +28,6 @@
         width: calc(2 * var(--bs-spacer));
     }
 
-    .drag-icon {
-        width: calc(2 * var(--bs-spacer));
-        color: var(--bs-gray-600);
-        margin: var(--bs-btn-padding-y) 0;
-        line-height: var(--bs-btn-line-height);
-        text-indent: calc(0.5 * var(--bs-spacer))
-    }
-
     &:hover, &:focus {
         cursor: grab;
 

src/assets/images/grip-vertical.svg

@@ -559,3 +559,17 @@ ngb-tooltip-window {
   // We use underline to discern link from text as we can't make color lighter on a white bg
   text-decoration: underline;
 }
+
+.drag-icon {
+  width: calc(2 * var(--bs-spacer));
+  height: calc(1.5 * var(--bs-spacer));
+  color: var(--bs-gray-600);
+  margin: var(--bs-btn-padding-y) 0;
+  line-height: var(--bs-btn-line-height);
+  display: inline-block;
+  -webkit-mask: url('/assets/images/grip-vertical.svg') no-repeat center;
+  mask: url('/assets/images/grip-vertical.svg') no-repeat center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  background-color: currentColor;
+}