sidenav expand fix

build/browsersync.js

@@ -5,10 +5,10 @@ bs.init({
   server: {
     routes: {
       '/': 'tmp',
+      '/dist/fonts': 'static/fonts',
       '/dist': 'dist',
       '/libs': 'static/libs',
       '/img': 'static/img',
-      '/fonts': 'static/fonts',
     }
   },
   files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],

pages/_includes/layout/css.html

 <link href="{{ site.base }}/dist/css/tabler.css" rel="stylesheet" />
 
-<link href="{{ site.base }}/fonts/feather.css" rel="stylesheet" />
-

pages/_includes/ui/icon.html

 {% capture class %}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% endcapture %}
 {% assign class = class | strip %}
-<i class="fe fe-{{ include.icon }}"></i>
+<i class="icon fe fe-{{ include.icon }}"></i>

scss/layout/_sidenav.scss

@@ -27,18 +27,14 @@ Sidebar
     &[data-toggle="collapse"] {
       &:after {
         display: block;
-        content: '';
+        font-family: 'Feather' !important;
+        content: $icon-fe-chevron-down;
         margin-left: auto;
         transition: transform .3s;
-        width: 1rem;
-        height: 1rem;
-        background: red;
-        //background: url("<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>")
       }
 
       &[aria-expanded="true"]:after {
         transform: rotate(-180deg);
-        background: green;
       }
     }
   }

scss/tabler.scss

@@ -5,6 +5,8 @@
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 
+@import "fonts/feather";
+
 @import "layout/webfonts";
 
 @import "layout/core";
@@ -58,5 +60,6 @@
 @import "utils/opacity";
 @import "utils/shadow";
 
+
 @import "dark";
 @import "rtl";

scss/ui/_icons.scss

 .icon {
-  width: 1em;
-  height: 1em;
   font-size: 1em;
-  vertical-align: -.2em;
+  vertical-align: -.1em;
 }
 
 .icon-md {
-  width: px2rem(20px);
-  height: px2rem(20px);
   font-size: px2rem(20px);
 }
 
 .icon-lg {
-  width: px2rem(40px);
-  height: px2rem(40px);
   font-size: px2rem(40px);
 }
 
-.icon-thin {
-  stroke-width: 1.5px;
-}
-
-.icon-filled {
-  fill: currentColor;
-}
-
 .icons-list {
   display: flex;
   flex-wrap: wrap;

scss/ui/_stamps.scss

@@ -12,8 +12,6 @@
   border-radius: 3px;
 
   .icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    vertical-align: middle;
+    font-size: 1.25rem;
   }
 }