Daemonite Material Theme

Customization Theme
46

@modius, at the moment it looks like using the old icon render works. Here’s the code if you want to try it out in the </head> section of a theme component:

<script type="text/discourse-plugin" version="0.8">
    const h = require("virtual-dom").h;
    
    // Support for font awesome icons
    function faClasses(icon, params) {
      let classNames = `fa fa-${icon.replacementId || icon.id} d-icon d-icon-${
        icon.id
      }`;
    
      if (params) {
        if (params.modifier) {
          classNames += " fa-" + params.modifier;
        }
        if (params["class"]) {
          classNames += " " + params["class"];
        }
      }
      return classNames;
    }
    
    // default resolver is font awesome
    api.registerIconRenderer({
      name: "font-awesome",
    
      string(icon, params) {
        let tagName = params.tagName || "i";
        let html = `<${tagName} class='${faClasses(icon, params)}'`;
        if (params.title) {
          html += ` title='${I18n.t(params.title).replace(/'/g, "&#39;")}'`;
        }
        if (params.label) {
          html += " aria-hidden='true'";
        }
        html += `></${tagName}>`;
        if (params.label) {
          html += `<span class='sr-only'>${params.label}</span>`;
        }
        return html;
      },
    
      node(icon, params) {
        let tagName = params.tagName || "i";
    
        const properties = {
          className: faClasses(icon, params),
          attributes: { "aria-hidden": true }
        };
    
        if (params.title) {
          properties.attributes.title = params.title;
        }
        if (params.label) {
          return h(tagName, properties, h("span.sr-only", I18n.t(params.label)));
        } else {
          return h(tagName, properties);
        }
      }
    });
</script>

It looks like there still might be a few icons that aren’t rendering correctly (.fa-thumbtack is the notable one), but in any case, I think this might be one angle to look at.

7 Likes