Updating the solution to support Material Icons.

Documentation/Configuration/MaterialIcons/README.md

@@ -1,24 +1,63 @@
 # Iconic Configuration: Material Icons
 
-*[If you have successfully configured Material Icons, please consider contributing to this doc!]*
+## Icon source files
 
-## Icons source file
+Packages like Material Icons use glyph codes or even ligatures to display the icon instead a specific css selector.
 
-Other packages like Material Icons use the glyph codes or even ligatures to display the icon instead a specific css selector. 
-```
+```html
 <i class="material-icons">alarm</i> (Template: <i class="material-icons">{icon}</i>)
 ```
-So this file can be the same css file or another files use to extract the icons property. In the case of Material Icons for instance there is a file called <a href="https://github.com/google/material-design-icons/blob/master/iconfont/codepoints">codepoints</a> where you can extract the icons names from.
+
+In the case of Material Icons there are five variations of icons and each one has it's own "codepoints" file:
+
+- MaterialIcons ( Baseline ): <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints">MaterialIcons-Regular.codepoints</a>
+- MaterialIcons - Outlined: <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIconsOutlined-Regular.codepoints">MaterialIconsOutlined-Regular.codepoints</a>
+- MaterialIcons - Round: <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIconsRound-Regular.codepoints">MaterialIconsRound-Regular.codepoints</a>
+- MaterialIcons - Sharp: <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIconsSharp-Regular.codepoints">MaterialIconsSharp-Regular.codepoints</a>
+- MaterialIcons - Two Tone: <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIconsTwoTone-Regular.codepoints">MaterialIconsTwoTone-Regular.codepoints</a>
+
+Depending on which set of icons you are trying to configure, you will need one of the above "codepoints" files.
+
+**Note:**
+You *cannot* use the .codepoints extension on the Visual Studio Cassini web server as the MIME type is not supported, if you would like to use this extension on your live site, you will need to add this MIME type, how to do this is explained in the answer to this Stackoverflow question: [How to add Mime Types in ASP.NET Core](https://stackoverflow.com/questions/51770084/how-to-add-mime-types-in-asp-net-core)
+
+Alternatively, you can rename the file with the .css extension.
+
+## Material Icons Font CSS
+
+Google recommend including their hosted font files like this:
+
+```html
+<!-- Baseline -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
+
+<!-- Outline -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
+
+<!-- Round -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet">
+
+<!-- Sharp -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet">
+
+<!-- Two Tone -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet">
+```
+
+You can use these files in the back office if you have correctly setup CORS to allow cross site access to `https://fonts.googleapis.com` or you can download the CSS file for the icon set you would like to use and add it to your website.
 
 ## Material Icons
+
 If you're having issues configuring Material Icons, try this configuration:
 
-**Css File**: https://fonts.googleapis.com/icon?family=Material+Icons
+**Css File**: https://fonts.googleapis.com/css2?family=Material+Icons
+
+**Rules file**: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints
 
-**Rules file**: https://github.com/skartknet/Iconic/tree/master/Documentation/Configuration/MaterialIcons/codepoints.css
+( **Note:** Don't forget to rename this file if your web server does not support the `.codepoints` MIME type. )
 
+The regex for the Selector input needs to be: `(\w+) [a-zA-Z0-9_]*`
 
-In order to make it work, you need to download the file and remove the first and last `{` `}` so the Icon service that loads the file doesn't think it's an actual obj and it returns it as plain text.
-The regex for the Selector input needs to be **"(\w+)":\s"[^"]"**
+## Resources
 
-Yes, this is a pretty dirty trick, but given that no other package for the moment have this issue we won't make Iconic compatible with JSON files.
+[Github Repo for Material Icons](https://github.com/google/material-design-icons/) ( Look inside the [font](https://github.com/google/material-design-icons/tree/master/font) folder for all the above files. )

Our.Iconic/wwwroot/js/src/iconic.prevalues.editor.controller.js

@@ -30,7 +30,6 @@
             },
             function () {
               $scope.previewIcon = null;
-              displayError("iconicErrors_no_rules");
               $scope.previewButtonState = "error";
             }
           );
@@ -111,8 +110,8 @@
         pickerIcons: $scope.model.package.filteredIcons,
         pickerPackageId: $scope.model.package.id,
         pickerConfig: {
-          packages: [$scope.model.package],
-        },
+          packages: [$scope.model.package]
+        }
       };
 
       $scope.openFilterIconsOverlay = function () {
@@ -137,20 +136,20 @@
         var cssUri = isExternalUri(uri)
           ? uri
           : umbRequestHelper.convertVirtualToAbsolutePath(
-              "~/" + uri.replace(/wwwroot\//i, "")
+              `~/${uri.replace(/wwwroot\//i, "")}`
             );
 
         $http.get(cssUri).then(
-          function (response) {
+          function () {
             assetsService.loadCss(cssUri);
           },
-          function (response) {
+          function () {
             displayError("iconicErrors_loadingCss");
           }
         );
       }
 
-      function loadPreconfigs() {
+      function loadPreConfigs() {
         $http
           .get(
             umbRequestHelper.convertVirtualToAbsolutePath(
@@ -161,7 +160,7 @@
             function (response) {
               $scope.preconfig = response.data.preconfigs;
             },
-            function (response) {
+            function () {
               displayError("iconicErrors_loading_preconfigs");
             }
           );
@@ -171,33 +170,40 @@
         return uri.indexOf("://") > -1;
       }
 
-      function displayError(alias) {
-        localizationService.localize(alias).then(function (response) {
-          notificationsService.error("Invalid Configuration", response);
+        function displayError(alias) {
+            var invalidConfigStr;
+            localizationService.localize("iconicConfig_invalidConfig").then(function (response) {
+              invalidConfigStr = response;
+          });
+
+          localizationService.localize(alias).then(function (response) {
+              notificationsService.error(invalidConfigStr, response);
         });
       }
 
       function openTreePicker(config) {
-        var picker = {
-          title: "Select file",
-          section: "settings",
-          treeAlias: "files",
-          entityType: "file",
-          filter: function (i) {
-            if (
-              i.name.indexOf(".min.css") === -1 &&
-              i.name.indexOf(".css") === -1
-            ) {
-              return true;
+        const picker = {
+            title: "Select file",
+            section: "settings",
+            treeAlias: "files",
+            entityType: "file",
+            filter: function (i) {
+                if (
+                    i.name.indexOf(".min.css") === -1 &&
+                        i.name.indexOf(".css") === -1 &&
+                        i.name.indexOf(".codepoints") === -1
+                ) {
+                    return true;
+                }
+                return false;
+            },
+            filterCssClass: "not-allowed",
+            close: function () {
+                editorService.close();
             }
-          },
-          filterCssClass: "not-allowed",
-          close: function () {
-            editorService.close();
-          },
         };
 
-        var args = _.assign(picker, config);
+        const args = _.assign(picker, config);
 
         editorService.treePicker(args);
       }
@@ -212,20 +218,21 @@
 
         if (!item.sourcefile) item.sourcefile = item.cssfile;
 
-        var path = isExternalUri(item.sourcefile)
-          ? item.sourcefile
-          : umbRequestHelper.convertVirtualToAbsolutePath(
-              "~/" + item.sourcefile.replace("wwwroot/", "")
+        const path = isExternalUri(item.sourcefile)
+            ? item.sourcefile
+            : umbRequestHelper.convertVirtualToAbsolutePath(
+                `~/${item.sourcefile.replace("wwwroot/", "")}`
             );
 
         $http.get(path).then(
           function (response) {
+            var pattern;
             item.extractedStyles = [];
-
             try {
-              var pattern = new RegExp(item.selector, "g");
+              pattern = new RegExp(item.selector, "g");
             } catch (e) {
               $scope.error = e.message;
+              displayError("iconicErrors_regexIssue");
               errorCallback();
               return;
             }
@@ -243,14 +250,18 @@
               errorCallback();
             }
           },
-          function (response) {
-            displayError("iconicErrors_loadingCss");
-            errorCallback();
+            function (response) {
+                if (response.config.url.indexOf(".codepoints") > -1 && response.status === 404) {
+                    displayError("iconicErrors_codepointsError");
+                } else {
+                    displayError("iconicErrors_loadingCss");
+                }
+                errorCallback();
           }
         );
       }
 
-      loadPreconfigs();
+      loadPreConfigs();
       $scope.loadPreview();
     }
   );

Our.Iconic/wwwroot/lang/en-US.xml

@@ -21,11 +21,11 @@
     <key alias="templateDescription">Enter an icon template</key>
     <key alias="backofficeTemplateDescription">Overrides the Template value when icon is displayed on the backoffice. Allows to have a different icon template in your backoffice. i.e. size, color, ...</key>        
     <key alias="cssFile">CSS file</key>
-    <key alias="cssFileDescription">CSS source to style the icon on the backoffice</key>
+    <key alias="cssFileDescription">CSS source to style the icon in the backoffice</key>
     <key alias="configType">Configuration type</key>
     <key alias="selectConfig">Select configuration</key>
     <key alias="rulesFile">Rules source file</key>
-    <key alias="rulesFileDescription">Where you want to extract the icons list from. If none selected, it will use the chosen CSS file.</key>
+    <key alias="rulesFileDescription">File used to extract the icon list. If none selected, the CSS file above will be used.</key>
     <key alias="extractedStyles">Extracted styles</key>
     <key alias="remove">Remove</key>
     <key alias="icons">Icons</key>
@@ -36,13 +36,16 @@
     <key alias="save">Save</key>
     <key alias="cancel">Cancel</key>
     <key alias="preview">Preview</key>
+    <key alias="invalidConfig">Invalid Configuration</key>
   </area>
   <area alias="iconicErrors">
-    <key alias="analysing">There was an error extracting icon rules. Please check the files' paths and Selector regex.</key>
-    <key alias="loading_preconfigs">Error loading preconfigs file.</key>
-    <key alias="loadingCss">Error loading CSS file.</key>
-    <key alias="no_rules">The extracted icons are 0. Please check that the Selector regex is correct.</key>
-    <key alias="selector">Error with Selector, please review it.</key>
+    <key alias="analysing">There was an error extracting icon rules. Please check the files' paths and selector regex.</key>
+    <key alias="loading_preconfigs">Error loading the preconfigs file.</key>
+    <key alias="loadingCss">Error loading the CSS file.</key>
+    <key alias="no_rules">No icons were extracted, please check that the selector regex is correct.</key>
+    <key alias="regexIssue">Error loading the regex, please check that it is a valid selector.</key>
+    <key alias="selector">Error with selector, please review it.</key>
+    <key alias="codepointsError">If you are currently using Visual Studio's built in web server, it does not support the ".codepoints" extension, if you are using IIS you may need to add the MIME type to your server, or you could just rename the file with a ".css" extension.</key>
   </area>
   <area alias="iconicValidation">
     <key alias="name">Please enter a name</key>

Our.Iconic/wwwroot/preconfigs.json

@@ -17,7 +17,7 @@
     },
     {
       "name": "Material Icons",
-      "selector": "\"(\\w+)\":\\s\"[^\"]",
+      "selector": "(\\w+) [a-zA-Z0-9_]*",
       "template": "<i class=\"material-icons\">{icon}</i>"
     },
     {