Failed to load resource (icons)

[erperejildo]

I'm having an issue with all icons not being loaded properly. Last time, this got fixed by upgrading Taiga, but on production, the problem persist after the last deployment.
This happened a few times locally, despite I have everything correctly setup:

package
"@taiga-ui/icons": "^4.54.0",

webpack

const CopyWebpackPlugin = require('copy-webpack-plugin');
...
new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/@taiga-ui/icons/src',
            to: 'assets/taiga-ui/icons',
            globOptions: {
              ignore: ['**/*.ts', '**/*.js', '**/*.json']
            }
          }
        ]
      })

app.config
tuiAssetsPathProvider("/assets/taiga-ui/icons"),

local

production

again, on production it used to work, but somehow, after upgrading Taiga (we didn't upgrade Angular for a while), it stopped working.
Most likely this is something from my side (because I didn't see anyone else complaining about this, that's why I didn't open an issue) but there are no other assets missing from the app and I'm not sure what could be the problem around this.

Extra question: could I use font-awesome pro with Taiga already? I know you were working on this.
I'm asking it because the default icons are a temporary option to the font-awesome ones for me anyway.

[waterplea]

You can see the path on the screenshot - url(/assets/taiga-ui/icons/x.svg). If you have an icon on that url – it should work, it's just CSS. Technically you can use icon fonts on the latest v4, if you pass iconStart="@font.some-text" it would set some-text to content of ::before element and font used for that comes from --tui-font-icon CSS variable. I haven't tested it on v4 and with Font Awesome, but Material icons on main/upcoming v5 work fine.

[erperejildo]

I thought I pasted the error but I didn't:

I don't have any difference in terms of css or setup between these environments. When I setup the icons, I had an issue with the path, but it was quickly fixed.
And then after a while they failed to load, I updated Taiga and got it working again. On production pretty much happened the same thing.

Do you have any live example with the font approach? If I can get use my icons it would be even better

[waterplea]

https://stackblitz.com/edit/angular-gm5fdlpf

1. Add your font, in this example: <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
2. Set --tui-font-icon, in this example: --tui-font-icon: Material Symbols Outlined
3. Use @font. prefix with icon name to pass the name as content, in this example @font.home

[erperejildo]

Thanks!

[erperejildo]

I was trying to have font-awesome working on stackblitz from a package to reproduce the same scenario but for some reason the node_modules can't be loaded and because of that icons are not load.

Anyway, for a simple icon, the trick is clear, but how can I replace the icon for a component? Like the close button for a dialog:
https://stackblitz.com/edit/angular-gm5fdlpf-7rwlcxsl?file=src%2Fapp%2Fapp.component.html

[waterplea]

Every icon that is used inside components can be replaced with DI, this particular icon comes from TUI_COMMON_ICONS token. Others, like calendar icon in input date, come from their respective options.