Foundry button class "icon" not working when injecting html into tile config

[CodaBool]

Describe the bug

Version

• Blade Runner Version: 12.0.1

🚩 Context

I am a module dev. I inject html into the tile config similar to the module Monk's Active Tiles. This works fine on any game system I've seen except Blade Runner.

📄 Issue

When using Foundry's built in button icon classes. I get a black background and square icon.

This can even be seen with Foundry's code

To help narrow down the root cause, I disabled my module and this can be seen with all modules disabled. This is the Basic tab of any tile config

This code from Foundry has this code

<button class="fa-solid fa-file-import fa-fw" type="button" data-tooltip="Browse Files" aria-label="Browse Files" tabindex="-1"></button>

Which is an example of the common way Foundry makes buttons with icons inside (they don't do this all the time, many times they will have a child tag. But even in their new code like the Regions UI there are examples of them using classes this way i.e. see Regions > Behaviors > Execute Macro > Macro button)

HTML

Here is the html that I'm injecting which in any other game system will use the included font awesome icon of a book

<button type="button" class="icon fa-solid fa-book"></button>

Reproduction

1. match machine details listed (foundry 12.330)
2. open any tile config (can view this on the Basic tab)
3. verify that the button on the tile image or video tab is displaying its icon correctly

System Info

OS: Fedora 40
Client Brave 1.69.153
Foundry Version 12.330
Blade Runner Version: 12.0.1

Logs

Foundry VTT | Rendering TileConfig

Priority this issue should have?

Low (formatting issues, things that don't impact operation)

Validations

• Done a clean install of the system.
• Disabled all modules.
• Checked if the issue is present in a new world instance (create a new world in foundry using the Blade Runner system).

[Stefouch]

Hi! Thank you for your report.

After a small investigation, it looks like the "Foundry Gridnik" font is applied before the "Font Awesome 6 Pro" font due to a faulty CSS rule. This cause the unicode character (used to render the icon) to be unrecognizable.

Probably from here:

blade-runner-foundry-vtt/src/styles/system/_app.scss

Lines 84 to 93 in 93c95f3

	.blade-runner,
	// .chat-message,
	// .window-app.dialog,
	.app:not(.form) {
	button:not(.tox-tbtn),
	.button,
	.dialog-button {
	@include utils.boxed-property;
	border-radius: 4px;
	font-family: var(--font-table);