diff --git a/README.md b/README.md
index 8c1bb2a00..335898d2d 100644
--- a/README.md
+++ b/README.md
@@ -148,7 +148,8 @@ npm run test:watch
   - [ ] Eventually add Unit Tests as a PreBundle task
 - [ ] Remove any Deprecated code
   - [ ] Create a [Migration Guide](https://github.com/ghiscoding/slickgrid-universal/wiki/Migration-for-Angular-Aurelia-Slickgrid) for Angular/Aurelia
-- [ ] Add Typings for Grid & DataView objects
 - [x] Add simple input bindings in the demo (e.g. pinned rows input)
+- [x] Add possibility to use SVG instead of Font Family
+- [ ] Add Typings for Grid & DataView objects
 - [ ] Cannot copy text from cell since it's not selectable
 - [ ] Remove all Service init 2nd argument (we can get DataView from the Grid object)
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 5cc961242..99eb45e8b 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -365,6 +365,7 @@ $header-menu-button-icon:                       "\f13a" !default;
 $header-menu-button-icon-color:                 inherit !default;
 $header-menu-button-icon-font-size:             14px !default;
 $header-menu-button-icon-font-weight:           normal !default;
+$header-menu-button-icon-width:                 14px !default;
 $header-menu-button-padding:                    0px !default;
 $header-menu-button-margin-right:               3px !default;
 $header-menu-border-radius:                     2px !default;
diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
index a89d08d71..45db6b3ba 100644
--- a/packages/common/src/styles/slick-bootstrap.scss
+++ b/packages/common/src/styles/slick-bootstrap.scss
@@ -208,15 +208,19 @@
         cursor: pointer;
 
         &.expanded:before {
+          display: inline-block;
           content: $icon-group-expanded;
           font-family: $icon-font-family;
           font-size: $icon-group-font-size;
+          width: $icon-group-width;
         }
 
         &.collapsed:before {
+          display: inline-block;
           content: $icon-group-collapsed;
           font-family: $icon-font-family;
           font-size: $icon-group-font-size;
+          width: $icon-group-width;
         }
       }
     }
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 57b52272c..3335ee4fd 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -288,10 +288,12 @@
   width: $header-menu-button-width;
 }
 .slick-header-menubutton:before {
+  display: inline-block;
+  content: $header-menu-button-icon;
   font-family: $icon-font-family;
   font-size: $header-menu-button-icon-font-size;
   font-weight: $header-menu-button-icon-font-weight;
-  content: $header-menu-button-icon;
+  width: $header-menu-button-icon-width;
 }
 
 .slick-header-column {
diff --git a/packages/common/src/styles/slickgrid-theme-material-with-font.scss b/packages/common/src/styles/slickgrid-theme-material-with-font.scss
new file mode 100644
index 000000000..f4f66afa8
--- /dev/null
+++ b/packages/common/src/styles/slickgrid-theme-material-with-font.scss
@@ -0,0 +1,106 @@
+$font-family:                           Roboto, "Helvetica Neue", sans-serif;
+$font-size-base-value:                  14;
+$icon-font-family:                      "Material Design Icons";
+$icon-font-size:                        20px;
+$group-totals-formatter-color:          #666666;
+$cell-border-top:                       none;
+$cell-font-weight:                      400;
+$cell-padding-top-bottom:               8px;
+$cell-padding-right-left:               7px;
+$cell-odd-background-color:             #f5f5f5;
+$cell-text-color:                       rgba(0, 0, 0, 0.87);
+$header-row-filter-padding:             8px 4px;
+$header-font-size:                      12px;
+$header-font-weight:                    700;
+$header-text-color:                     rgba(0, 0, 0, 0.87);
+$header-border-bottom:                  transparent;
+$header-filter-row-border-bottom:       1px solid #d0d0d0;
+$header-resizable-hover:                2px solid lighten(#48c774, 15%);
+$header-resizable-hover-border-bottom:  $header-resizable-hover;
+$header-resizable-hover-border-left:    $header-resizable-hover;
+$header-resizable-hover-border-right:   $header-resizable-hover;
+$header-resizable-hover-border-top:     $header-resizable-hover;
+$header-resizable-hover-width:          4px;
+$header-resizable-hover-border-radius:  8px;
+$header-resizable-hover-right:          0;
+$header-resizable-hover-opacity:        0.4;
+$slick-pane-top-border-top:             1px solid #d0d0d0;
+$container-border-top:                  1px solid #ccc;
+$container-border-bottom:               1px solid #ccc;
+$container-border-left:                 1px solid #ccc;
+$container-border-right:                1px solid #ccc;
+$icon-sort-asc:                         "\F0360";
+$icon-sort-desc:                        "\F035D";
+$icon-sort-font-size:                   22px;
+$icon-sort-position-right:              18px;
+$checkbox-selector-size:                22px;
+$checkbox-selector-icon-font-weight:    normal;
+$checkbox-selector-icon-checked:        "\F0132";
+$checkbox-selector-icon-unchecked:      "\F0131";
+$checkbox-selector-opacity:             1;
+$checkbox-selector-opacity-hover:       0.9;
+$cell-menu-icon-margin-right:           6px;
+$column-picker-checkbox-size:           18px;
+$column-picker-checkbox-font-weight:    normal;
+$column-picker-checkbox-icon-checked:   "\F012c";
+$column-picker-checkbox-icon-unchecked: "\F012c";
+$column-picker-checkbox-width:          18px;
+$column-picker-title-font-size:         18px;
+$context-menu-item-font-size:           16px;
+$context-menu-icon-font-size:           16px;
+$icon-group-collapsed:                  "\F0142";
+$icon-group-expanded:                   "\F0140";
+$icon-group-font-weight:                normal;
+$icon-group-margin-right:               8px;
+$draggable-group-drop-width:            100%;
+$draggable-group-drop-radius:           0;
+$draggable-group-toggle-collapsed-icon: "\F0142";
+$draggable-group-toggle-expanded-icon:  "\F0140";
+$draggable-group-title-height:          24px;
+$draggable-group-title-line-height:     24px;
+$draggable-group-title-vertical-align:  top;
+$grid-menu-checkbox-size:               18px;
+$grid-menu-checkbox-font-weight:        normal;
+$grid-menu-checkbox-icon-checked:       "\F012c";
+$grid-menu-checkbox-icon-unchecked:     "\F012c";
+$grid-menu-checkbox-width:              18px;
+$grid-menu-icon-font-size:              20px;
+$grid-menu-icon-width:                  20px;
+$grid-menu-icon-top-margin:             8px;
+$grid-menu-title-font-size:             18px;
+$header-menu-button-icon-font-size:     20px;
+$header-menu-icon-font-size:            18px;
+$header-menu-icon-width:                18px;
+$header-menu-button-icon:               "\F0140";
+$header-menu-button-margin-right:       6px;
+$header-menu-display:                   inline-block;
+$multiselect-icon-arrow-font-size:      $icon-font-size - 4px;
+$multiselect-icon-checked:              "\F0132";
+$multiselect-icon-unchecked:            "\F0131";
+$multiselect-icon-radio-checked:        "\F043E";
+$multiselect-icon-radio-unchecked:      "\F0130";
+$multiselect-unchecked-opacity:         0.8;
+$preheader-border-right:                1px solid #e2e2e2;
+// $preheader-border-bottom:               1px solid #e2e2e2;
+$row-move-plugin-cursor:                grab;
+$row-move-plugin-icon:                  "\F0278";
+$slider-editor-height:                  26px;
+$primary-color:                         #009530;
+$row-mouse-hover-color:                 #ebfaef;
+$row-selected-color:                    #d4f6d7; /*rgba(0, 149, 48, 0.2);*/
+
+@import './roboto-font';
+@import './slick-default-theme';
+@import './slick-without-bootstrap-min-styling';
+@import './slick-grid';
+@import './slick-controls';
+@import './slick-editors';
+@import './slick-plugins';
+@import './slick-pagination';
+@import './slick-footer';
+@import './slickgrid-examples';
+@import './slick-bootstrap';
+@import './bootstrap-jquery-ui-autocomplete';
+
+$link-color: $primary-color;
+@import './extra-styling.scss';
diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss
index f4f66afa8..e761ee48b 100644
--- a/packages/common/src/styles/slickgrid-theme-material.scss
+++ b/packages/common/src/styles/slickgrid-theme-material.scss
@@ -1,3 +1,7 @@
+@import './sass-utilities';
+
+$primary-color:                         #009530;
+$dark-gray:                             #3f3e3e;
 $font-family:                           Roboto, "Helvetica Neue", sans-serif;
 $font-size-base-value:                  14;
 $icon-font-family:                      "Material Design Icons";
@@ -29,65 +33,78 @@ $container-border-top:                  1px solid #ccc;
 $container-border-bottom:               1px solid #ccc;
 $container-border-left:                 1px solid #ccc;
 $container-border-right:                1px solid #ccc;
-$icon-sort-asc:                         "\F0360";
-$icon-sort-desc:                        "\F035D";
-$icon-sort-font-size:                   22px;
-$icon-sort-position-right:              18px;
+$icon-sort-asc:                         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"></path></svg>');
+$icon-sort-desc:                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"></path></svg>');
+$icon-sort-font-size:                   16px;
+$icon-sort-position-right:              14px;
+$icon-sort-width:                       16px;
 $checkbox-selector-size:                22px;
-$checkbox-selector-icon-font-weight:    normal;
-$checkbox-selector-icon-checked:        "\F0132";
-$checkbox-selector-icon-unchecked:      "\F0131";
+$checkbox-selector-color:               $primary-color;
+$checkbox-selector-icon-width:          $checkbox-selector-size;
+$checkbox-selector-icon-checked:        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($checkbox-selector-color)}" viewBox="0 0 24 24"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path></svg>');
+$checkbox-selector-icon-unchecked:      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($checkbox-selector-color)}" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
 $checkbox-selector-opacity:             1;
 $checkbox-selector-opacity-hover:       0.9;
 $cell-menu-icon-margin-right:           6px;
 $column-picker-checkbox-size:           18px;
 $column-picker-checkbox-font-weight:    normal;
-$column-picker-checkbox-icon-checked:   "\F012c";
-$column-picker-checkbox-icon-unchecked: "\F012c";
+$column-picker-checkbox-icon-checked:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg>');
+$column-picker-checkbox-icon-unchecked: $column-picker-checkbox-icon-checked;
 $column-picker-checkbox-width:          18px;
 $column-picker-title-font-size:         18px;
 $context-menu-item-font-size:           16px;
 $context-menu-icon-font-size:           16px;
-$icon-group-collapsed:                  "\F0142";
-$icon-group-expanded:                   "\F0140";
+$icon-group-width:                      22px;
+$icon-group-collapsed:                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
+$icon-group-expanded:                   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>');
 $icon-group-font-weight:                normal;
-$icon-group-margin-right:               8px;
+$icon-group-margin-right:               0;
 $draggable-group-drop-width:            100%;
 $draggable-group-drop-radius:           0;
-$draggable-group-toggle-collapsed-icon: "\F0142";
-$draggable-group-toggle-expanded-icon:  "\F0140";
+$draggable-group-toggle-collapsed-icon: $icon-group-collapsed;
+$draggable-group-toggle-expanded-icon:  $icon-group-expanded;
 $draggable-group-title-height:          24px;
 $draggable-group-title-line-height:     24px;
 $draggable-group-title-vertical-align:  top;
 $grid-menu-checkbox-size:               18px;
 $grid-menu-checkbox-font-weight:        normal;
-$grid-menu-checkbox-icon-checked:       "\F012c";
-$grid-menu-checkbox-icon-unchecked:     "\F012c";
+$grid-menu-checkbox-icon-checked:       $column-picker-checkbox-icon-checked;
+$grid-menu-checkbox-icon-unchecked:     $column-picker-checkbox-icon-checked;
 $grid-menu-checkbox-width:              18px;
 $grid-menu-icon-font-size:              20px;
 $grid-menu-icon-width:                  20px;
 $grid-menu-icon-top-margin:             8px;
 $grid-menu-title-font-size:             18px;
-$header-menu-button-icon-font-size:     20px;
 $header-menu-icon-font-size:            18px;
 $header-menu-icon-width:                18px;
-$header-menu-button-icon:               "\F0140";
+$header-menu-button-icon:               $icon-group-expanded;
+$header-menu-button-icon-font-size:     22px;
+$header-menu-button-icon-width:         22px;
 $header-menu-button-margin-right:       6px;
 $header-menu-display:                   inline-block;
-$multiselect-icon-arrow-font-size:      $icon-font-size - 4px;
-$multiselect-icon-checked:              "\F0132";
-$multiselect-icon-unchecked:            "\F0131";
-$multiselect-icon-radio-checked:        "\F043E";
-$multiselect-icon-radio-unchecked:      "\F0130";
+$multiselect-icon-arrow-font-size:      16px;
+$multiselect-icon-height:               16px;
+$multiselect-icon-width:                16px;
+$multiselect-icon-margin:               0px 4px 0 0;
+$multiselect-icon-checked:              $checkbox-selector-icon-checked;
+$multiselect-icon-unchecked:            $checkbox-selector-icon-unchecked;
+$multiselect-icon-radio-checked:        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 22 22"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path></svg>');
+$multiselect-icon-radio-unchecked:      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 22 22"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
 $multiselect-unchecked-opacity:         0.8;
 $preheader-border-right:                1px solid #e2e2e2;
 // $preheader-border-bottom:               1px solid #e2e2e2;
 $row-move-plugin-cursor:                grab;
-$row-move-plugin-icon:                  "\F0278";
+$row-move-plugin-icon:                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($dark-gray)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>');
 $slider-editor-height:                  26px;
-$primary-color:                         #009530;
 $row-mouse-hover-color:                 #ebfaef;
 $row-selected-color:                    #d4f6d7; /*rgba(0, 149, 48, 0.2);*/
+$detail-view-icon-collapse:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
+$detail-view-icon-expand:               url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
+$pagination-icon-seek-first:            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path></svg>');
+$pagination-icon-seek-end:              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path></svg>');
+$pagination-icon-seek-next:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
+$pagination-icon-seek-prev:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>');
+
 
 @import './roboto-font';
 @import './slick-default-theme';
diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
index 3b8b63311..dc6c3b3c5 100644
--- a/packages/common/src/styles/slickgrid-theme-salesforce.scss
+++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -15,7 +15,6 @@ $cell-font-weight:                      400;
 $cell-odd-background-color:             #f3f2f2;
 $cell-text-color:                       #080707;
 $font-size-base-value:                  13;
-$icon-font-family:                      "Material Design Icons";
 $icon-font-size:                        20px;
 $group-totals-formatter-color:          #666666;
 $header-background-color:               #fafaf9;
@@ -71,7 +70,7 @@ $context-menu-icon-font-size:           16px;
 $icon-group-collapsed:                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.3 2l9.5 9.5c.3.3.3.7 0 1L8.3 22c-.3.2-.8.2-1.1 0l-1-1c-.2-.3-.2-.8 0-1.1l7.6-7.4c.2-.3.2-.7 0-1L6.3 4.1C6 3.8 6 3.3 6.3 3l1-1c.3-.2.7-.2 1 0z"></path></svg>');
 $icon-group-expanded:                   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M22 8.2l-9.5 9.6c-.3.2-.7.2-1 0L2 8.2c-.2-.3-.2-.7 0-1l1-1c.3-.3.8-.3 1.1 0l7.4 7.5c.3.3.7.3 1 0l7.4-7.5c.3-.2.8-.2 1.1 0l1 1c.2.3.2.7 0 1z"></path></svg>');
 $icon-group-font-weight:                normal;
-$icon-group-margin-right:               8px;
+$icon-group-margin-right:               4px;
 $draggable-group-drop-width:            100%;
 $draggable-group-drop-radius:           0;
 $draggable-group-toggle-collapsed-icon: $icon-group-collapsed;
@@ -117,18 +116,20 @@ $preheader-font-size:                   14px;
 $preheader-height:                      21px;
 $row-move-plugin-cursor:                grab;
 $row-move-plugin-icon-width:            18px;
-$row-move-plugin-icon:                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>');
+$row-move-plugin-icon:                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor(#000000de)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>');
 $editor-focus-box-shadow:               0 0 3px $primary-color;
 $slider-editor-height:                  24px;
+$slider-filter-thumb-color:             $highlight-color;
+$slider-filter-runnable-track-bgcolor:  #ECEBEA;
 $row-selected-color:                    darken($cell-odd-background-color, 1%);
 $row-mouse-hover-color:                 $cell-odd-background-color;
 $row-mouse-hover-box-shadow:            0 0 0 2px #dddbda;
-$detail-view-icon-collapse:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
-$detail-view-icon-expand:               url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
-$pagination-icon-seek-first:            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path></svg>');
-$pagination-icon-seek-end:              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path></svg>');
-$pagination-icon-seek-next:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
-$pagination-icon-seek-prev:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($header-menu-button-icon-color)}" viewBox="0 0 24 24"> <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>');
+$detail-view-icon-collapse:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
+$detail-view-icon-expand:               url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
+$pagination-icon-seek-first:            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path></svg>');
+$pagination-icon-seek-end:              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path></svg>');
+$pagination-icon-seek-next:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>');
+$pagination-icon-seek-prev:             url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($primary-color)}" viewBox="0 0 24 24"> <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"></path></svg>');
 
 @import './slick-without-bootstrap-min-styling';
 @import './slick-default-theme';
diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
index bb70bbb4e..e3e9cbe7a 100644
Binary files a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip and b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip differ
diff --git a/packages/web-demo-vanilla-bundle/src/material-styles.scss b/packages/web-demo-vanilla-bundle/src/material-styles.scss
index e0c328455..4d7eef6f0 100644
--- a/packages/web-demo-vanilla-bundle/src/material-styles.scss
+++ b/packages/web-demo-vanilla-bundle/src/material-styles.scss
@@ -1,3 +1,4 @@
 /* make sure to add the @import the SlickGrid Material Theme AFTER the variables changes */
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material-with-font.scss';
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 // @import '@slickgrid-universal/common/dist/styles/sass/se-slickgrid-theme-material.scss';