feat(styling): add CSS/SASS Material Design & Salesforce styling them…

…es (#454) * feat(styling): add CSS/SASS Material Design & Salesforce styling themes
ghiscoding · May 12, 2020 · 0030763 · 0030763
1 parent 8f16559
commit 0030763
Show file tree

Hide file tree

Showing 18 changed files with 1,790 additions and 528 deletions.
diff --git a/package.json b/package.json
@@ -43,11 +43,22 @@
     "bump-version": "npm --no-git-tag-version version",
     "prepare-release": "cross-env npm run changelog && npm run build && npm run doc",
     "release": "standard-version",
-    "sass-build-task:scss-compile": "node-sass --output-style compressed true src/app/modules/angular-slickgrid/styles/ -o dist/styles/css",
-    "sass-build-task:autoprefixer": "postcss dist/styles/css/*.css --use autoprefixer -d dist/styles/css",
-    "sass:build": "npm-run-all -p sass-build-task:*",
+    "sass-build-task:scss-compile:bootstrap": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-bootstrap.scss -o dist/styles/css --output-style compressed",
+    "postsass-build-task:scss-compile:bootstrap": "postcss --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --output-style compressed",
+    "sass-build-task:scss-compile:material": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss -o dist/styles/css --output-style compressed",
+    "postsass-build-task:scss-compile:material": "postcss --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --output-style compressed",
+    "sass-build-task:scss-compile:salesforce": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss -o dist/styles/css --output-style compressed",
+    "postsass-build-task:scss-compile:salesforce": "postcss --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --output-style compressed",
+    "sass:build": "run-p sass-build-task:scss-compile:*",
     "sass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass",
-    "sass:watch": "node-sass 'src/app/modules/angular-slickgrid/styles/**/*.scss' -c 'npm run sass:build'"
+    "presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap",
+    "sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- -watch",
+    "presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material",
+    "sass:watch:material": "cross-env npm run sass-build-task:scss-compile:material -- -watch",
+    "presass:watch:salesforce": "cross-env npm run sass-build-task:scss-compile:salesforce",
+    "sass:watch:salesforce": "cross-env npm run sass-build-task:scss-compile:salesforce -- -watch",
+    "sass:watch": "run-p sass:watch:bootstrap sass:watch:material sass:watch:salesforce sass:copy:watch",
+    "sass:copy:watch": "nodemon --ext scss --watch src/app/modules/angular-slickgrid/styles/*.scss --exec \"npm run sass:copy\""
   },
   "author": "Ghislain B.",
   "repository": {

diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss
diff --git a/src/app/modules/angular-slickgrid/styles/extra-styling.scss b/src/app/modules/angular-slickgrid/styles/extra-styling.scss
@@ -0,0 +1,73 @@
+.pointer {
+  cursor: pointer;
+}
+
+.cell-effort-driven {
+  text-align: center;
+}
+
+.editable-field {
+  background-color: #e3f0fb !important;
+}
+.fake-hyperlink {
+  cursor: pointer;
+  color: $link-color;
+  &:hover {
+      text-decoration: underline;
+  }
+}
+
+.delete-icon {
+  &:hover {
+      color: #b14c4a;
+  }
+}
+.edit-icon,
+.info-icon {
+  &:hover {
+      color: rgb(0, 153, 255);
+  }
+}
+
+.font-10px {
+  font-size: 10px;
+}
+.font-12px {
+  font-size: 12px;
+}
+.font-14px {
+  font-size: 14px;
+}
+.font-16px {
+  font-size: 16px;
+}
+.font-18px {
+  font-size: 18px;
+}
+.font-20px {
+  font-size: 20px;
+}
+.font-22px {
+  font-size: 22px;
+}
+.font-24px {
+  font-size: 24px;
+}
+.font-26px {
+  font-size: 26px;
+}
+.font-28px {
+  font-size: 28px;
+}
+.font-30px {
+  font-size: 30px;
+}
+.font-32px {
+  font-size: 32px;
+}
+.font-34px {
+  font-size: 34px;
+}
+.font-36px {
+  font-size: 36px;
+}
diff --git a/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss b/src/app/modules/angular-slickgrid/styles/material-svg-icons.scss
@@ -0,0 +1,169 @@
+/* icon color */
+$icon-color-mdi-arrow-collapse: $icon-color !default;
+$icon-color-mdi-arrow-expand: $icon-color !default;
+$icon-color-mdi-checkbox-blank-outline: $icon-color !default;
+$icon-color-mdi-check-box-outline: $icon-color !default;
+$icon-color-mdi-checkbox-marked: $icon-color !default;
+$icon-color-mdi-close: $icon-color !default;
+$icon-color-mdi-close-thick: $icon-color !default;
+$icon-color-mdi-content-copy: $icon-color !default;
+$icon-color-mdi-download: $icon-color !default;
+$icon-color-mdi-file-document-outline: $icon-color !default;
+$icon-color-mdi-file-excel-outline: $icon-color !default;
+$icon-color-mdi-file-music-outline: $icon-color !default;
+$icon-color-mdi-file-pdf-outline: $icon-color !default;
+$icon-color-mdi-filter-remove-outline: $icon-color !default;
+$icon-color-mdi-flip-vertical: $icon-color !default;
+$icon-color-mdi-folder: $icon-color !default;
+$icon-color-mdi-folder-open: $icon-color !default;
+$icon-color-mdi-help-circle: $icon-color !default;
+$icon-color-mdi-help-circle-outline: $icon-color !default;
+$icon-color-mdi-menu: $icon-color !default;
+$icon-color-mdi-microsoft-excel: $icon-color !default;
+$icon-color-mdi-plus: $icon-color !default;
+$icon-color-mdi-sort-ascending: $icon-color !default;
+$icon-color-mdi-sort-descending: $icon-color !default;
+$icon-color-mdi-swap-vertical: $icon-color !default;
+$icon-color-mdi-sync: $icon-color !default;
+
+/* icon width */
+$icon-width-mdi-arrow-collapse: $icon-width !default;
+$icon-width-mdi-arrow-expand: $icon-width !default;
+$icon-width-mdi-checkbox-blank-outline: $icon-width !default;
+$icon-width-mdi-check-box-outline: $icon-width !default;
+$icon-width-mdi-checkbox-marked: $icon-width !default;
+$icon-width-mdi-close: $icon-width !default;
+$icon-width-mdi-close-thick: $icon-width !default;
+$icon-width-mdi-content-copy: $icon-width !default;
+$icon-width-mdi-download: $icon-width !default;
+$icon-width-mdi-file-document-outline: $icon-width !default;
+$icon-width-mdi-file-excel-outline: $icon-width !default;
+$icon-width-mdi-file-music-outline: $icon-width !default;
+$icon-width-mdi-file-pdf-outline: $icon-width !default;
+$icon-width-mdi-filter-remove-outline: $icon-width !default;
+$icon-width-mdi-flip-vertical: $icon-width !default;
+$icon-width-mdi-folder: $icon-width !default;
+$icon-width-mdi-folder-open: $icon-width !default;
+$icon-width-mdi-help-circle: $icon-width !default;
+$icon-width-mdi-help-circle-outline: $icon-width !default;
+$icon-width-mdi-menu: $icon-width !default;
+$icon-width-mdi-microsoft-excel: $icon-width !default;
+$icon-width-mdi-plus: $icon-width !default;
+$icon-width-mdi-sort-ascending: $icon-width !default;
+$icon-width-mdi-sort-descending: $icon-width !default;
+$icon-width-mdi-swap-vertical: $icon-width !default;
+$icon-width-mdi-sync: $icon-width !default;
+
+.mdi {
+  &.mdi-flip-h {
+    transform: scaleX(-1);
+  }
+  &.mdi-flip-v {
+    transform: scaleY(-1);
+  }
+
+  &.mdi-arrow-collapse:before {
+    width: $icon-width-mdi-arrow-collapse;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-arrow-collapse)}" viewBox="0 0 24 24"><path d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z"></path></svg>');
+  }
+  &.mdi-arrow-expand:before {
+    width: $icon-width-mdi-arrow-expand;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-arrow-expand)}" viewBox="0 0 24 24"><path d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"></path></svg>');
+  }
+  &.mdi-checkbox-blank-outline:before {
+    width: $icon-width-mdi-checkbox-blank-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-checkbox-blank-outline)}" 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>');
+  }
+  &.mdi-check-box-outline:before {
+    width: $icon-width-mdi-check-box-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-check-box-outline)}" viewBox="0 0 24 24"><path d="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9"></path></svg>');
+  }
+  &.mdi-checkbox-marked:before {
+    width: $icon-width-mdi-checkbox-marked;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-checkbox-marked)}" 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>');
+  }
+  &.mdi-close:before {
+    width: $icon-width-mdi-close;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-close)}" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>');
+  }
+  &.mdi-close-thick:before {
+    width: $icon-width-mdi-close-thick;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-close-thick)}" viewBox="0 0 24 24"><path d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z"></path></svg>');
+  }
+  &.mdi-content-copy:before {
+    width: $icon-width-mdi-content-copy;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-content-copy)}" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>');
+  }
+  &.mdi-download:before {
+    width: $icon-width-mdi-download;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-download)}" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg>');
+  }
+  &.mdi-file-document-outline:before {
+    width: $icon-width-mdi-file-document-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-file-document-outline)}" viewBox="0 0 24 24"><path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"></path></svg>');
+  }
+  &.mdi-file-excel-outline:before {
+    width: $icon-width-mdi-file-excel-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-file-excel-outline)}" viewBox="0 0 24 24"><path d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12.9 14.5L15.8 19H14L12 15.6L10 19H8.2L11.1 14.5L8.2 10H10L12 13.4L14 10H15.8L12.9 14.5Z"></path></svg>');
+  }
+  &.mdi-file-music-outline:before {
+    width: $icon-width-mdi-file-music-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-file-music-outline)}" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M13,10V12H11V17A2,2 0 0,1 9,19A2,2 0 0,1 7,17A2,2 0 0,1 9,15C9.4,15 9.7,15.1 10,15.3V10H13Z"></path></svg>');
+  }
+  &.mdi-file-pdf-outline:before {
+    width: $icon-width-mdi-file-pdf-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-file-pdf-outline)}" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.72 10.9,12.35 10.92,12.31M11.57,13.15C11.17,14.45 10.37,15.84 10.37,15.84C11.22,15.5 13.08,15.11 13.08,15.11C11.94,14.11 11.59,13.16 11.57,13.15M14.71,15.32C14.71,15.32 16.46,15.97 16.5,15.71C16.57,15.44 15.17,15.2 14.71,15.32M9.05,16.81C8.28,17.11 7.54,18.39 7.72,18.39C7.9,18.4 8.63,17.79 9.05,16.81M11.57,11.26C11.57,11.21 12,9.58 11.57,9.53C11.27,9.5 11.56,11.22 11.57,11.26Z"></path></svg>');
+  }
+  &.mdi-filter-remove-outline:before {
+    width: $icon-width-mdi-filter-remove-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-filter-remove-outline)}" viewBox="0 0 24 24"><path d="M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z"></path></svg>');
+  }
+  &.mdi-flip-vertical:before {
+    width: $icon-width-mdi-flip-vertical;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-flip-vertical)}" viewBox="0 0 24 24"><path d="M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z"></path></svg>');
+  }
+  &.mdi-folder:before {
+    width: $icon-width-mdi-folder;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-folder)}" viewBox="0 0 24 24"><path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"></path></svg>');
+  }
+  &.mdi-folder-open:before {
+    width: $icon-width-mdi-folder-open;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-folder-open)}" viewBox="0 0 24 24"><path d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z"></path></svg>');
+  }
+  &.mdi-help-circle:before {
+    width: $icon-width-mdi-help-circle;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-help-circle)}" viewBox="0 0 24 24"><path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>');
+  }
+  &.mdi-help-circle-outline:before {
+    width: $icon-width-mdi-help-circle-outline;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-help-circle-outline)}" viewBox="0 0 24 24"><path d="M11,18H13V16H11V18M12,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,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"></path></svg>');
+  }
+  &.mdi-menu:before {
+    width: $icon-width-mdi-menu;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-menu)}" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path></svg>');
+  }
+  &.mdi-microsoft-excel:before {
+    width: $icon-width-mdi-microsoft-excel;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-microsoft-excel)}" viewBox="0 0 24 24"><path  d="M21.17 3.25Q21.5 3.25 21.76 3.5 22 3.74 22 4.08V19.92Q22 20.26 21.76 20.5 21.5 20.75 21.17 20.75H7.83Q7.5 20.75 7.24 20.5 7 20.26 7 19.92V17H2.83Q2.5 17 2.24 16.76 2 16.5 2 16.17V7.83Q2 7.5 2.24 7.24 2.5 7 2.83 7H7V4.08Q7 3.74 7.24 3.5 7.5 3.25 7.83 3.25M7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03Q6.8 10.5 6.5 9.96 6.25 9.43 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78M13.88 19.5V17H8.25V19.5M13.88 15.75V12.63H12V15.75M13.88 11.38V8.25H12V11.38M13.88 7V4.5H8.25V7M20.75 19.5V17H15.13V19.5M20.75 15.75V12.63H15.13V15.75M20.75 11.38V8.25H15.13V11.38M20.75 7V4.5H15.13V7Z"></path></svg>');
+  }
+  &.mdi-plus:before {
+    width: $icon-width-mdi-plus;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-plus)}" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg>');
+  }
+  &.mdi-sort-ascending:before {
+    width: $icon-width-mdi-sort-ascending;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-sort-ascending)}" viewBox="0 0 24 24"><path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"></path></svg>');
+  }
+  &.mdi-sort-descending:before {
+    width: $icon-width-mdi-sort-descending;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-sort-descending)}" viewBox="0 0 24 24"><path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"></path></svg>');
+  }
+  &.mdi-swap-vertical:before {
+    width: $icon-width-mdi-swap-vertical;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-swap-vertical)}" viewBox="0 0 24 24"><path d="M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z"></path></svg>');
+  }
+  &.mdi-sync:before {
+    width: $icon-width-mdi-sync;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-sync)}" viewBox="0 0 24 24"><path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"></path></svg>');
+  }
+}