[Feature Request] For web renders, let `Icon` and `Chip` render as `<button>` only if it needs to be clickable

[utkarsh1097]

Is your feature request related to a problem? Please Describe.

Please refer to #3857

Tl;dr: Button with underlying Icon and Chip with underlying Icon causes validateDOMNesting check to fail for web renders because of nested <button>.

Describe the solution you'd like

To mitigate this, I propose the following changes:

1. Icon need not behave as an HTML <button> if there are no onPress or related callbacks defined.
2. As an extension to the above: Icon should not allow onPress or related callbacks in case it is used as a child component of a Button
3. [Optional, but I think this is good] Chip need not behave as a Button because according to the docs: "Chips are compact elements that represent an input, attribute, or action. They may display text, icons, or both". My understanding is that they can also be used as "discrete labels/tags" to associate some sort of metadata (similar to "Labels" in Jira or "Multi-Select Tags" in Notion). In that case, Chip can have a clickable Icon.

Describe alternatives you've considered

<Icon.Button> from react-native-vector-icons conditionally be a functional replacement to <Button icon={}>, but it is less flexible.

Additional context

[yuryibaravy]

would be great to see this issue fixed & merged, coz now it's super strange to see button inside button after build, despite docs show possibility to use Icon inside Button component