use @mdi/font instead of @material-design-icons/font, rename road font to lobsta_road

Author: smellman

package.json

@@ -21,7 +21,7 @@
   "homepage": "https://github.com/gtt-project/redmine_gtt#readme",
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "@material-design-icons/font": "^0.14.9",
+    "@mdi/font": "^7.2.96",
     "fontfaceobserver": "^2.3.0",
     "geojson": "^0.5.0",
     "ol": "^7.4.0",

src/components/gtt-client/geocoding/index.ts

@@ -186,7 +186,7 @@ export function setGeocoding(currentMap: Map):void {
 
   // Control button
   const geocodingCtrl = new Toggle({
-    html: '<i class="material-icons">manage_search</i>',
+    html: '<i class="mdi mdi-map-search-outline"></i>',
     title: this.i18n.control.geocoding,
     className: "ctl-geocoding",
     onToggle: (active: boolean) => {

src/components/gtt-client/init/controls.ts

@@ -44,7 +44,7 @@ function addFullScreenAndRotateControls(instance: any): void {
  */
 function addMaximizeControl(instance: any): void {
   const maximizeCtrl = new Button({
-    html: '<i class="material-icons">zoom_out_map</i>',
+    html: '<i class="mdi mdi-arrow-expand-all"></i>',
     title: instance.i18n.control.maximize,
     handleClick: () => {
       zoomToExtent.call(instance, true);

src/components/gtt-client/openlayers/index.ts

@@ -180,20 +180,20 @@ export function setControls(types: Array<string>) {
     })
 
     // Material design icon
-    let mdi = 'place'
+    let mdi = 'mdi-map-marker-outline'
 
     switch (type.toLowerCase()) {
         case 'linestring':
-        mdi = 'polyline'
+        mdi = 'mdi-vector-polyline'
         break;
 
       case 'polygon':
-        mdi = 'format_shapes'
+        mdi = 'mdi-vector-polygon'
         break;
       }
 
     const control = new Toggle({
-      html: `<i class="material-icons" >${mdi}</i>`,
+      html: `<i class="mdi ${mdi}" ></i>`,
       title: this.i18n.control[type.toLowerCase()],
       interaction: draw,
       active: (type === geometryType)
@@ -252,7 +252,7 @@ export function setControls(types: Array<string>) {
     });
 
     editbar.addControl(new Button({
-      html: '<i class="material-icons">file_upload</i>',
+      html: '<i class="mdi mdi-file-upload"></i>',
       title: this.i18n.control.upload,
       handleClick: () => {
         dialog.dialog('open')
@@ -465,7 +465,7 @@ export function setGeolocation(currentMap: Map) {
 
   // Control button
   const geolocationCtrl = new Toggle({
-    html: '<i class="material-icons">my_location</i>',
+    html: '<i class="mdi mdi-crosshairs-gps"></i>',
     title: this.i18n.control.geolocation,
     active: false,
     onToggle: (active: boolean) => {

src/components/gtt-settings/processElement.ts

@@ -30,8 +30,7 @@ export const processElement = (element: HTMLSelectElement): void => {
         if (selected) {
           const style = fonts[fontKey].font.toLowerCase().replace(/\s+/g, '-');
           const icon = element.nextElementSibling;
-          icon.className = `${style}${style === 'material-icons' ? '' : ' icon-' + glyphKey}`;
-          icon.textContent = style === 'material-icons' ? glyphKey : '';
+          icon.className = `${style}${style === 'material-design-icons' ? ' mdi mdi-' + glyphKey : ' icon-' + glyphKey}`;
         }
       }
     }
@@ -45,8 +44,7 @@ export const processElement = (element: HTMLSelectElement): void => {
       change: function (event: any, data: any) {
         const style = data.item.optgroup.toLowerCase().replace(/\s+/g, '-');
         const icon = document.querySelector(`#icon_${element.id}`);
-        icon.className = `${style}${style === 'material-icons' ? '' : ' icon-' + data.item.value}`;
-        icon.textContent = style === 'material-icons' ? data.item.value : '';
+        icon.className = `${style}${style === 'material-design-icons' ? ' mdi mdi-' + data.item.value : ' icon-' + data.item.value}`;
       },
     })
     .selectmenu('menuWidget')

src/components/gtt-settings/selectMenuOverride.ts

@@ -15,13 +15,12 @@ export const overrideSelectMenu = (): void => {
       const wrapper = $('<div>', { text: '' });
       const style = item.optgroup.toLowerCase().replace(/\s+/g, '-');
 
-      const isMaterialIconsStyle = style === 'material-icons';
-      const iconClass = `ui-icons ${style}${isMaterialIconsStyle ? '' : ' icon-' + item.value}`;
+      const isMaterialIconsStyle = style === 'material-design-icons';
+      const iconClass = `ui-icons ${style}${isMaterialIconsStyle ? ' mdi mdi-' + item.value : ' icon-' + item.value}`;
 
       const iconConfig = {
         class: iconClass,
         title: item.label,
-        text: isMaterialIconsStyle ? item.value : '',
       };
 
       $('<i>', iconConfig).prependTo(wrapper);

src/styles/icons/custom/custom-icons-def.ts

@@ -4,7 +4,7 @@ import FontSymbol from 'ol-ext/style/FontSymbol';
 const iconMappings: { [key: string]: any } = {
   'lobsta': '\uf101',
   'park_bench': '\uf102',
-  'road': '\uf103',
+  'lobsta_road': '\uf103',
   'waste': '\uf104'
 };
 

src/styles/icons/custom/custom-icons.css

@@ -40,7 +40,7 @@ i[class*=" icon-"]:before {
 .icon-park_bench:before {
   content: "\f102";
 }
-.icon-road:before {
+.icon-lobsta_road:before {
   content: "\f103";
 }
 .icon-waste:before {