@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, "'")}'`;
}
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.
