USWDS icons are not displaying

[natalialuzuriaga]

Hi! I am working on a project that uses USWDS form.io library: https://dsacms.github.io/codejson-generator/. I am currently working on improving the form's styling and would like to contribute upstream to solve this for all projects.

Currently, for the datagrid component, the remove circle icon is not displaying as shown below from https://dsacms.github.io/codejson-generator/.

I'm not quite sure what the fix is here but I noticed that USWDS icon names use an underscore now vs a dash (remove-circle vs remove_circle).

<button type="button" class="usa-button usa-button--secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}">
            <i class="{{ctx.iconClass('remove-circle')}}"></i>
          </button>

Would appreciate if the team can take a look!

[lane-formio]

Could you provide a codesandbox or jsfiddle that can reproduce the issue? This would help me expedite the triage.

[natalialuzuriaga]

Here is a jsfiddle: https://jsfiddle.net/Lcekmpu9/14/

[lane-formio]

I put a ticket in for planning, but if someone wants to fix this in the meantime we are always happy to review PRs!

Internal reference: FIO-10633