Missing font awesome icons within logical flow SVG.

[mharward-gr]

Description

When viewing logical flows (both normal and beta views) for an application in the UI, the font-awesome icons within the SVG do not show.

Font awesome icons used elsewhere (in normal html) appear as expected.

Experimenting with this seems to show that adding the class fa to the text elements within the SVG (with an existing attribute of font-family="FontAwesome" seems to fix the issue.

I've checked and this doesn't seem to be an issue with the font being missing, though interestingly the icons are still appearing in https://demo.waltz.finos.org/, so it may be either a regression or something weird with our setup (docker image deployed on kubernetes, no public internet).

Would someone be able to take a look?

Waltz Version

waltz:1.46

Steps to Reproduce

1. Visit application page, open data flows section, see logical flows tab (where logical flows exist)
2. See that beside each upstream and downstream source the question icon is missing (replaced by a square icon)

Expected Result

The icon is rendered correctly

Actual Result

The icon is not properly rendered - rendered as a square 'missing icon' character

[davidwatkins73]

Hi,

Thanks for the detailed report. @JWoodland-Scott has already fixed this in the 1.47 release. The related issue is #6350.

We tried a bunch of different options to get font-awesome to work in all contexts with webpack-5 and never got a solution that worked for both displaying, printing and image-downloading. The fix involved creating small, custom svg symbols for use by d3 (or in raw svg).

[mharward-gr]

Perfect, thank you @davidwatkins73 and @JWoodland-Scott. Sorry for the duplicate!