Unable to use a dynamic value for layers-text

[abueloshika]

When using the <FaIcon> component with an element that has a fa-layers-text class, I'm unable to use a dynamic value for the text.

When trying to use the layers-text feature with the add I originally had a problem applying a data-fa-transform to it. @jrjohnson kindly gave me the following code to make it work:

//new-icon.js

import Component from '@ember/component';
import {
  dom,
} from '@fortawesome/fontawesome-svg-core';
import {
  next
} from '@ember/runloop';

export default class NewIcon extends Component {
  scanDom(element) {
    next(() => {
      dom.i2svg({
        node: element
      });
    });
  }
}

//new-icon.hbs

<span class="fa-layers fa-lg mr-1" {{did-insert (fn this.scanDom)}}>
  <FaIcon @icon="circle" @size="2x" />
  <span class="fa-layers-text text-white" data-fa-transform="grow-8">
    text
  </span>
</span>

This worked great, however if I use a passed value in place of text like {{@text}}, the SVG does not update to reflect the new value.

I did try to achieve it with a {{did-insert}} modifier like this:

//new-icon.hbs
<span
  class="fa-layers fa-lg mr-1"
  {{did-insert (fn this.scanDom)}}
  {{did-insert (fn this.scanDom) @score}}
>
  <FaIcon @icon="circle" @size="2x" />
  <span class="fa-layers-text text-white" data-fa-transform="grow-8">
    {{@score}}
  </span>
</span>

Even though I can confirm that the {{@score}} value has in fact updated in the component, it still doesn't update the SVG with the correct value. I'd expect the text in the SVG to update alongside the passed in value.

Let me know if you need any more information or have any other tips for me to try.