Guidelines updates: Icon

[mcoker]

It would probably be helpful to have design guidelines for the <Icon> component. Something that came up recently is that the <Icon> component on its own will deliver an icon with our default icon font-size and color tokens. However, if the <Icon> is used somewhere a component already styles an <Icon> (like a button or a label), you want to use the isInline prop to tell the icon's font-size and color to inherit from it's parent context. We will be adding some docs to the component examples pages around this, but I wonder if this could also be touched on in design guidelines. At a minimum I think some guidelines around icon font-sizes and colors and how the <Icon> component allows you to customize those would be good.

cc @tlabaj @thatblindgeye @srambach

---

Jira Issue: PF-1284

[edonehoo]

Also integrate when to use icons before or after title text: if it's a descriptive icon (visual explaining text/label) it typically goes in front of the text. if it's functioning as an action/providing additional context, it usually goes after (think external link icons, help popovers, inline edit icons, etc.).