Fix icon margin within small buttons

[mcslayer]

Done

Based on my understanding, the logic is as follows:
When no icon exists, the space is applied symmetrically to both the left and right sides: [x<span>x].
When an icon is added, the space is adjusted accordingly: either [x/2<icon>x/2<span>x] or [x<span>x/2<icon>x/2].

I have fixed this and included additional examples for the button/icon section for clarity.

#5386

QA

• Please review the updated page examples/patterns/buttons/icon, which includes various button sizes with icons
• Demo: https://vanilla-framework-5387.demos.haus/docs/examples/patterns/buttons/icon?theme=light

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.

[webteam-app]

mcslayer is not a collaborator of the repo

[bartaz]

Demo: https://vanilla-framework-5387.demos.haus/docs/examples/patterns/buttons/icon?theme=light

[mcslayer]

@bartaz Hi! I’ve finished working on the code, fixed the issues, and reviewed everything we discussed. The code is now ready for further review or implementation. I’d appreciate it if you could take a look so we can move forward.

[dgtlntv]

LGTM Design +1

[bartaz]

Thanks @mcslayer for the fix and responsiveness. That's really helpful.