Refactor icon font handling to reduce complexity

Author: dkastl

app/views/redmine_gtt/hooks/_view_layouts_base_html_head.html.erb

@@ -1,7 +1 @@
-<%= tag.meta(
-  name: 'gtt-font-custom-icons',
-  content: asset_path('plugin_assets/redmine_gtt/custom-icons.woff2')) %>
-
-<%= tag.meta(
-  name: 'gtt-font-mdi-webfont',
-  content: asset_path('plugin_assets/redmine_gtt/materialdesignicons-webfont.woff2')) %>
+<% # Header hook %>

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

@@ -8,23 +8,7 @@ const iconMappings: { [key: string]: any } = {
   'waste': '\uf104'
 };
 
-// Read the meta tag for custom-icons
-const customIconsMeta = document.querySelector('meta[name="gtt-font-custom-icons"]');
-const customIconsUrl = customIconsMeta ? customIconsMeta.getAttribute('content') : 'data:application/font-woff2;base64,'; // Provide a data URL for an empty font
-
-// Dynamically create the @font-face rule
-const style = document.createElement('style');
-style.type = 'text/css';
-style.innerHTML = `
-  @font-face {
-    font-family: 'custom-icons';
-    font-style: normal;
-    font-weight: 400;
-    font-display: block;
-    src: url(${customIconsUrl}) format('woff2');
-  }
-`;
-document.head.appendChild(style);
+const customIconsUrl = 'RAILS_ASSET_URL("custom-icons.woff2")';
 
 // Define the font face
 let customFont: FontFace;

src/styles/icons/custom/custom-icons.scss

@@ -1,4 +1,4 @@
-$custom-icons-path: unquote('RAILS_ASSET_URL("custom-icons.woff2")');
+$custom-icons-path: 'RAILS_ASSET_URL("custom-icons.woff2")';
 
 @font-face {
   font-family: "custom-icons";

src/styles/icons/material-design/material-design-def.ts

@@ -7300,13 +7300,11 @@ const iconMappings: { [key: string]: any } = {
   "zodiac-virgo": "\u{F0A88}",
 };
 
-// Read the meta tag for MDI webfont
-const mdiWebfontMeta = document.querySelector('meta[name="gtt-font-mdi-webfont"]');
-const mdiWebfontUrl = mdiWebfontMeta ? mdiWebfontMeta.getAttribute('content') : 'data:application/font-woff2;base64,'; // Provide a data URL for an empty font
+const mdiWebfontUrl = 'RAILS_ASSET_URL("materialdesignicons-webfont.woff2")';
 
 // Dynamically create the @font-face rule
 const style = document.createElement('style');
-style.type = 'text/css';
+// style.type = 'text/css';
 style.innerHTML = `
   @font-face {
     font-family: 'Material Design Icons';

src/styles/index.ts

@@ -15,7 +15,7 @@ import './icons/custom/custom-icons-def';
 
 // Import Material Design icons filled style CSS for using a large collection of Google-designed icons
 // import '@material-design-icons/font/filled.css';
-import '@mdi/font/scss/materialdesignicons.scss';
+import '@mdi/font/css/materialdesignicons.css';
 
 // Import Material Design icons definition JS file to define icon names and variations
 import './icons/material-design/material-design-def';