Change icon set in django tables

aleksis/core/static/public/style.scss

@@ -445,41 +445,17 @@ th.orderable > a {
   height: inherit;
 }
 
-th.orderable > a::after {
-  @extend .material-icons;
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
-  float: right;
-  content: "unfold_more";
+th.orderable {
+  background: no-repeat right center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z' /%3E%3C/svg%3E");
 }
 
-th.orderable.asc > a {
-  color: inherit;
-
-  &::after {
-    content: "expand_less";
-  }
+th.orderable.asc {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' /%3E%3C/svg%3E");
 }
 
-th.orderable.desc > a {
-  color: inherit;
-
-  &::after {
-    content: "expand_more";
-  }
+th.orderable.desc {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");
 }
 
 /*+++++++*/

aleksis/core/templates/django_tables2/materialize.html

@@ -66,7 +66,7 @@
               <li class="waves-effect">
                 <a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}"
                    class="page-link">
-                  <i class="material-icons">chevron_left</i>
+                  <i class="material-icons iconify" data-icon="mdi:chevron-left"></i>
                 </a>
               </li>
             {% endblock pagination.previous %}
@@ -86,7 +86,7 @@
             {% block pagination.next %}
               <li class="waves-effect">
                 <a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}" class="page-link">
-                  <i class="material-icons">chevron_right</i>
+                  <i class="material-icons iconify" data-icon="mdi:chevron-right"></i>
                 </a>
               </li>
             {% endblock pagination.next %}