Icons: Handling with Icons should be improved

[JulianBu]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

We noticed some issues when using the Icons as foundations.

1. Changing the variant to filled did not work on the Icon Information Circle. In your Showcase, it supports both variants. But setting it via:
   <DBIcon icon={"information_circle"} variant="filled" />
   This doesn't work. But setting it via the style props works.
   <DBIcon icon={"information_circle"} style={{ "--db-icon-font-family": "db-filled" }} />
2. This is not a specific bug. It's more about the handling with the Icons. We would prefer specific props to change the variant, color and size of the Icon instead of manually changing its style. Currently, we are using the Icon like this:

<DBIcon
    icon={iconName}
    style={{
        "--db-icon-color": iconColor,
        "--db-icon-font-family": "db-filled",
        "--db-icon-font-size": "16px",
    }}
/>

Expected Behaviour

1. Setting the variant should change to fill the given Icon.
2. We expect the behavior like:

<DBIcon
    icon={"iconName"}
    color={"iconColor"}
    size={"size"} 
    variant={"filled"}
/>

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

When there are specific props that can be passed into a component, it would be nice if there is an example and a list with the given props. Like in the components section of your showcase.

[nmerget]

@JulianBu We removed the typings at the moment.

We would implement some TypeScript Magic like this to control the properties for DBIcon with the db-theme.
It hasn't the highest priority at the moment

[JulianBu]

Shouldn't the variant prop work consistently across all icons, regardless of the provided types?
We’ve also noticed that not all icons expose type definitions. Could you clarify why that is? 😊

[nmerget]

At the moment the variant reflects directly the font-family of the icon-font.

We provide some whitelabel icons (minimal set for icons inside components), because we aren't allowed to put the DB icons in our repository. Therefore, we use a custom icon-font just for the whitelabel icons which is named db-ux-default or db-ux-filed. They are free to use relying on https://lucide.dev/icons/.

We provide our DB Icons with an additonal package, where the icon font-family is db-icons. We use the default CSS feature to detect which font should be loaded by changing the font-family. So for DB Apps we would need the variant=db-default|db-filled. Because the DB Icon lay in another package we need to find a way to overwrite the variant inside DBIcon. As I mentioned we know how to do it, but it has no focus at the moment.

Additionally you can create a custom icon-font then you need to use e.g. my-name-default or my-name-filled, so it makes sense to overwrite the TypeScript interface with a d.ts file inside a users repository

[nmerget]

We’ve also noticed that not all icons expose type definitions. Could you clarify why that is? 😊

Did you include the d.ts file inside your ts-config.json? And you can get additional support for React and Vue with this.