feat: Add icon support to Badge

[jperals]

Add the ability to render an icon inside a Badge, modeled on the Button component's icon feature.

• Add iconName, iconUrl, iconSvg, iconAlt, and iconAlign props to BadgeProps. The icon uses size="inherit" and a flex container so it stays vertically centered with the label text.
• Extract shared iconName/iconUrl/iconAlt props into a new BaseIconProps interface consumed by both Badge and Button. iconSvg is intentionally left out, since its documentation is component-specific.
• Add stable .content and .icon test-util selectors in a dedicated badge/test-classes/styles.scss, decoupled from structural styles.
• Add findIcon and findContent methods to the Badge test-utils wrapper, using findContent to match the library-wide convention.
• Add a badge icon permutations dev page.
• Update documenter and test-utils selectors snapshots.

Description

Related links, issue #, if available: n/a

How has this been tested?

Visual regression tests will be added in follow-up PR.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.66%. Comparing base (43825b3) to head (c262219).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4973   +/-   ##
=======================================
  Coverage   97.66%   97.66%           
=======================================
  Files         959      959           
  Lines       31354    31373   +19     
  Branches    11583    11593   +10     
=======================================
+ Hits        30623    30642   +19     
  Misses        685      685           
  Partials       46       46           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jperals]

Reuse the new BaseIconProps interface.

Note: there are more components which could benefit from this deduplication, but I don't want to enlarge the scope further.

[Copilot]

🟡 Changes recommended

It introduces iconUrl rendering in Badge without URL safety validation and can render <img> without an alt attribute, which are security/accessibility blockers.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds icon-rendering support to the Badge component, aligning its icon API and test-utils patterns with existing icon-enabled components (notably Button) while introducing shared typings for common icon props.

Changes:

• Added iconName, iconUrl, iconSvg, iconAlt, and iconAlign support to Badge rendering and public props.
• Introduced a new shared BaseIconProps interface and migrated Button icon typings to reuse it.
• Added stable badge test selectors + test-utils wrapper methods, plus unit tests, a permutations dev page, and updated snapshots.

File summaries

File	Description
src/types/base-icon.ts	Introduces shared BaseIconProps for reusable iconName/iconUrl/iconAlt props.
src/button/interfaces.ts	Refactors BaseButtonProps to extend BaseIconProps (no functional API change intended).
src/badge/interfaces.ts	Extends BadgeProps with BaseIconProps and adds iconAlign/iconSvg badge-specific props.
src/badge/index.tsx	Implements icon rendering (alignment + inherited sizing) and adds test-util class hooks.
src/badge/styles.scss	Adds .badge-with-icon flex styling to vertically center icon + content.
src/badge/test-classes/styles.scss	Adds dedicated .content / .icon test hooks decoupled from structural styles.
src/test-utils/dom/badge/index.ts	Adds findIcon / findContent to the Badge DOM wrapper using new test hooks.
src/badge/tests/badge.test.tsx	Adds unit tests covering icon rendering, alignment ordering, and icon-only behavior.
pages/badge/icon-permutations.page.tsx	Adds a dev/permutations page to visually inspect icon variants and alignment.
src/tests/snapshot-tests/snapshots/test-utils-selectors.test.tsx.snap	Updates snapshot for new badge test selectors.
src/tests/snapshot-tests/snapshots/documenter.test.ts.snap	Updates generated API/test-utils documentation snapshots for new props/methods.

Review details

Suppressed comments (1)

src/types/base-icon.ts:29

• BaseIconProps doesn't include an iconSvg prop, but this documentation says iconAlt is ignored when using the iconSvg slot. Suggest clarifying that this only applies when the consuming component supports iconSvg.

  /**
   * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.
   * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.
   */

• Files reviewed: 11/11 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.