react-icons: Do not force square icons

[ryelo]

After looking at these icons:

There is visual inconstancy when these are placed next to one another because the CloudIcons are wider than they are tall. This creates an empty space on the top and bottom of the icon.

For a more extreme example:

Since PF is consuming font-awsome icons (which don't put a constraint on fixed square icons), why are we forcing the icons to be square instead of having the same height? If you investigate any of the font awesome icons, you can see the only baseline they use is the height with a max-width

If a user needs to place icons in a list and needs them to be the same width, then I propose to use something like font-awesome's fixed width icons as a prop on the icons.

I don't think it's fair to make the user write custom CSS with various height/width values in order to correct the visual inconsistency.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[dgutride]

Need to review along with overall icon strategy - pinning open

[mcoker]

We noticed this inconsistency while updating the custom icons in core, and how react-icons scale down the icon height when the icon is wider than it is tall. An example of this is the FA warning-triangle icon. Here is the warning alert icon in core and react:

Removing the inline width should resolve it, though that's likely breaking as it would impact the layout where an icon is used.

[tlabaj]

Per discussions with @mcoker, we should also need to consider if React should use CSS tokens from core for the size values.

[mcarrano]

Should consider as a possible optional feature but not change the default behavior of our icons.