# Daemonite Material Theme

**URL:** <https://meta.discourse.org/t/daemonite-material-theme/64521>\
**Category:** Theme\
**Created:** [June 15, 2017, 3:30am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521 "2017-06-15T03:30:03Z")\
**Posts on this page:** 1\
**Showing post:** 46

<div class="post-metadata">

**Author:** ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)\
**Post date:** [November 29, 2018, 11:50am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/46 "2018-11-29T11:50:13Z")

</div>

@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:

```plaintext
<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.

---

_[View the full topic](https://meta.discourse.org/t/daemonite-material-theme/64521)._