New icon handling in v4

[loxy]

Hi!

I've some questions regarding the new usage and setup of icons in version 4 of Taiga UI. It is not really described in migration guide and the top level icon entry in docs is gone. Only the component is described now. Most of them are just for clarification:

• it is not required anymore to provide script or other stuff to be able to use icons (like tuiSvgOptionsProvider), right?
• it just works out of the box when installing appropriate package like @taiga-ui/icons-material, right?
• to use an icon from that libs I need to put a string that starts with @tui, right?
  • For Material I need to use: @tui.material.*
  • For Font Awesome I need to use: @tui.fa.*
  • For Lucide (kind of default) I just need to use @tui.*
    • Why is it not @tui.lucide.*?
• The prefix @tui is just there to distinguish between icons from lib and real URLs, right?
• Is it possible to set another default icon lib? So, that @tui.* resolves to Material icons by default?
• The migration just replaces all occurrences like iconStart="iconName" with iconStart="@tui.iconName", right? We need to manually replace the string afterwards when we for example mapped all icons before to Material, right?

BTW, great work for v4. A lot of things really improved! Thank you for all your efforts!

[waterplea]

• Right, it should work out of the box and with SVG processing gone there's not really a lot to customize, mostly just the path to icons, if you use CDN or something similar and custom resolver if you want to use anything other than Taiga UI icons by name
• All you need to do is add the package you want to assets inside angular.json
• Yes. Lucide is the default so there's no prefix just to simplify it. Maybe we will rename it to @taiga-ui/icons-lucide in v5 and change that.
• Correct. Or for you to distinguish the name from your custom named icons if you override the resolver
• By default it resolves all dots as a nested folder structure for assets, you can use that for your purposes. However all packages use their own naming, nothing guarantees that for @tui.heart there's a similar icon called @tui.material.heart. You can override all icons used in components with DI options tokens for each component separately. No icon is hardcoded as we use our custom icon set for proprietary projects.
• Yes, migration replaces tuiIcon with @tui. and camel case to kebab case, mostly. There's a dictionary of icons whose names have changed so it also does that. But for custom icons it will not work.

Thank you for kind words, we really like how v4 is working out too. Hopefully after all textfield controls are also finalized it will be even better. And then v5 with Angular 17 and signal inputs 🎉