Use providers to define component icons

[fynnfeldpausch]

Hey, this is just a follow up discussion of todays Q&A session.

The current way to customize icons seems like a quick fix to me without a good concept. The mapping described at https://taiga-ui.dev/icon-set has a couple of drawbacks in my opinion:

1. one needs to know the icon names of the original icon set
2. one needs to look into the source code to know which icons are used where
3. icons are basically adjustable on icon-level and not on component level

I thought it could be nice to use the providers suggested in #139 to also define icons for that component. the provider could define the icon and even use a function that takes the height of the component as an argument. That way one could either define a single icon name or even different icon names for different sizes. That is much more flexible. Imagine that one of the components switches to another of your icons if the components is used with size xs. But what if we also want to change if it used with xl. This is currently not possible.

Here is a rough outline of what I mean:

export interface InputDateOptions {
    readonly size: TuiSizeS | TuiSizeL;
    readonly icon: string | ((size: TuiSizeS | TuiSizeL) => string);
}

export const TUI_INPUT_DATE_DEFAULT_OPTIONS: InputDateOptions = {
    size: 'm',
    icon: 'tuiIconCalendarLarge'
};

In the component one would check if the dateOptions icon is a function. Then call it with the current size of the component or use the string name directly.

[waterplea]

Sounds like this could just be polymorpheus content with size being $implicit of context. I'll investigate this idea next week. We already use similar approach to auto rotate arrow icon in drop-down components like combo box or select.