Add examples of headings with icons

[thibaudcolas]

Description

Implements the new "headings with icons" pattern, via a utility class rather than a specific component. I chose this approach because it’s the simplest and seemed sufficient. The vertical alignment between the icon and text isn’t always perfect but I’d say it’s worth adjusting case-by-case based on the specific visuals of the icon.

Instructions to test

I’ve added two sets of examples:

• In foundation stories, with a single icon that’s a good approximation of the kind of visual that could be next to a heading
• In BaseHeading stories, with three different icons that represent different possible formats (high, wide, square)

[Scotchester]

I think a case could be made for a default vertical alignment that is better than this, but it would necessitate some CSS like:

h3 svg.inline {
  position: relative;
  top: -0.0625em;
}

I reluctantly agree that it's probably not worth it right now; we'll see how widely these start to get used.

Approved pending an update for my nitpick.

[thibaudcolas]

Thanks @Scotchester, yes I considered something like this but was hesitant to proceed without a good understanding of how appropriate this "default" would be across a wide enough range of icons / heading sizes.