Table: replace sorting arrow icons with borders to avoid overlap

packages/table/src/table-header.js

@@ -119,9 +119,9 @@ export default {
                     {
                       column.sortable
                         ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                            <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
                             </i>
-                            <i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                            <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
                             </i>
                           </span>
                         : ''

packages/theme-chalk/src/table.scss

@@ -438,27 +438,28 @@
   }
 
   .sort-caret {
-    color: $--color-text-placeholder;
-    width: 14px;
-    overflow: hidden;
-    font-size: 15px;
+    width: 0;
+    height: 0;
+    border: solid 5px transparent;
     position: absolute;
 
     &.ascending {
+      border-bottom-color: $--color-text-placeholder;
       top: 5px;
     }
 
     &.descending {
+      border-top-color: $--color-text-placeholder;
       bottom: 7px;
     }
   }
 
   .ascending .sort-caret.ascending {
-    color: $--color-primary;
+    border-bottom-color: $--color-primary;
   }
 
   .descending .sort-caret.descending {
-    color: $--color-primary;
+    border-top-color: $--color-primary;
   }
 
   .hidden-columns {