feat(styling): add material design icons to npm & scss instead of html

ghiscoding · Apr 28, 2020 · 9e9a1ca · 9e9a1ca
1 parent 0d6d222
commit 9e9a1ca
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 3 deletions.
diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -152,8 +152,8 @@ export const GlobalGridOptions: GridOption = {
     minWidth: 140,
     iconClearFilterCommand: 'fa fa-filter mdi mdi mdi-filter-remove-outline text-danger',
     iconClearSortCommand: 'fa fa-unsorted mdi mdi-swap-vertical',
-    iconSortAscCommand: 'fa fa-sort-amount-asc mdi mdi-sort-reverse-variant',
-    iconSortDescCommand: 'fa fa-sort-amount-desc mdi mdi-sort-variant',
+    iconSortAscCommand: 'fa fa-sort-amount-asc mdi mdi-sort-ascending',
+    iconSortDescCommand: 'fa fa-sort-amount-desc mdi mdi-flip-v mdi-sort-descending',
     iconColumnHideCommand: 'fa fa-times mdi mdi-close',
     hideColumnHideCommand: false,
     hideClearFilterCommand: false,

diff --git a/packages/web-demo-vanilla-bundle/index.ejs b/packages/web-demo-vanilla-bundle/index.ejs
@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8">
   <title><%- htmlWebpackPlugin.options.metadata.title %></title>
-  <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
   <!-- imported CSS are concatenated and added automatically -->

diff --git a/packages/web-demo-vanilla-bundle/package.json b/packages/web-demo-vanilla-bundle/package.json
@@ -24,6 +24,7 @@
     "not dead"
   ],
   "dependencies": {
+    "@mdi/font": "^5.1.45",
     "@slickgrid-universal/common": "^0.0.2",
     "@slickgrid-universal/excel-export": "^0.0.2",
     "@slickgrid-universal/file-export": "^0.0.2",
@@ -39,6 +40,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.5.2",
+    "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.2.0",

diff --git a/packages/web-demo-vanilla-bundle/src/styles.scss b/packages/web-demo-vanilla-bundle/src/styles.scss
@@ -4,6 +4,10 @@ $link-color: #2cad56;
 /* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
+/* Material Design Icons */
+$mdi-font-path: "~@mdi/font/fonts";
+@import "~@mdi/font/scss/materialdesignicons.scss";
+
 .fake-hyperlink {
     cursor: pointer;
     color: $link-color;

diff --git a/packages/web-demo-vanilla-bundle/webpack.config.js b/packages/web-demo-vanilla-bundle/webpack.config.js
@@ -56,6 +56,7 @@ module.exports = ({ production } = {}, { extractCss, analyze, tests, hmr, port,
       { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], issuer: /\.[tj]s$/i },
       { test: /\.scss$/, use: ['css-loader', 'sass-loader'], issuer: /\.html?$/i },
       { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
+      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' },
       { test: /\.html$/i, loader: 'html-loader' },
       { test: /\.ts?$/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }
     ],