Set icon alignment in paragraph to text-bottom

[advl]

Done

• Set icons in paragraph to have a vertical-align set to middle

Fixes #5103
Fixes WD-13630

QA

• Open demo
• Verify icons are aligned to the middle. Increase font-size if necessary to test.
• Review updated documentation:
  • No Changes in documentation

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[if relevant, include a screenshot or screen capture]

[jmuzina]

Percy build shows that icons inline with paragraphs are now dipping below the baseline, so they're a bit too low.

Possibly they need to be nudged slightly upwards or have their height changed?

[lyubomir-popov]

the issue this fixes specifies middle, not text bottom. May I ask why this pr is setting it to text-bottom?

[advl]

@jmuzina The behaviour with middle is to align to align it vertically to the center of the parent element. As it shows in the examples on the MDN page, the middle alignment is independent from any font lines. I am unsure in our particular situation what would be the most idiomatic solution.

My past experience solving this kind of issues was to embed svgs into a font (using, for instance glyphter) - which offers more control in the way the icons shows but comes with drawbacks (extra woff file to download + accessibility concerns).

@lyubomir-popov Small typo on my end - it's actually set to middle.

[jmuzina]

Received verbal design +1 from @lyubomir-popov in standup today

[bartaz]

Looks good, thanks!