use a drag handle with icon

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -2,7 +2,6 @@
   :host {
     width: 100%;
     height: 100%;
-    
   }
   .center {
     position: absolute;
@@ -26,19 +25,19 @@
     display: flex;
     flex-direction: column;
   }
-  .editable .editable-hovered {
-    visibility: hidden;
-  }
-  .editable:hover .editable-hovered {
-    visibility: visible;
-  }
+
   .handle {
+    display: block;
     height: 1.5em;
+    visibility: hidden;
+    width: fit-content;
+  }
+  [cdkDrag] {
+    position: relative;
   }
   [cdkDrag]:hover .handle, .cdk-drop-list-dragging .handle {
-    background-color: #f3f3f3;
-    border-radius: 3px;
     cursor: grab;
+    visibility: visible;
   }
 </style>
 
@@ -71,7 +70,7 @@
         cdkDrag 
         *ngFor="let id of column" 
         [attr.widget-id]="id">
-        <div cdkDragHandle class="handle"></div>
+        <div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
         <app-text-widget 
           *ngIf="isTextWidget(id)"
           [data]="getTextWidget(id)!" (deleted)="delete($event)"></app-text-widget>