feat(config): add icon options and align ionic theme with md defaults

[brandyscarney]

Issue number: internal

---

What is the current behavior?

Several components use Phosphor Icons by default only for the ionic theme.

What is the new behavior?

• Removes the Phosphor Icon defaults for the ionic theme, instead replacing them with whatever icon md uses
• This reverts most of the code in 08fc0b9
• Phosphor Icon svgs can be set directly by any app consuming Ionic Framework using the config, or passed to ion-icon as a font.
• Adds the missing config properties for icons which were removed:
  • Checkbox: checkboxCheckedIcon and checkboxIndeterminateIcon
  • Refresher: refresherArrowIcon
  • Select Modal: selectModalCancelIcon

Does this introduce a breaking change?

• Yes
• No

Checkbox

• The container CSS shadow part is now the element that wraps the checkmark instead of the svg element that draws it. The part still controls the checkbox's size, border, and background, so existing styles for those properties are unaffected.

  SVG-specific properties such as fill, stroke and stroke-width no longer have any effect through ::part(container) because container is no longer an SVG element. To set the color of the checkmark, use the icon part instead:

  - ion-checkbox::part(container) {
  -   stroke: purple;
  - }
  + ion-checkbox::part(icon) {
  +   color: purple;
  + }

  The --checkmark-color CSS variable can also be used to set the checkmark color. Both ::part(icon) and --checkmark-color apply to the default checkmark as well as to an icon set with the checkboxCheckedIcon or checkboxIndeterminateIcon global config options. In contrast, the mark part only applies to states that do not have a configured icon.

  Setting color on the container part has no effect because the icon sets its own color.

  To change the thickness of the default checkmark, use the --checkmark-width CSS variable or set stroke-width on the mark part. These apply to each state (checked and indeterminate) unless an icon is configured for that state. For example, when checkboxCheckedIcon is configured, these properties do not apply to the checked state but continue to apply to the indeterminate state. Similarly, when checkboxIndeterminateIcon is configured, they do not apply to the indeterminate state but continue to apply to the checked state.

  For a configured Ionicon drawn with a stroke, set --ionicon-stroke-width on the icon part. For a configured SVG, set stroke-width on the icon part; this applies unless the SVG sets its own stroke-width.

Other information

Previews:

• Accordion
• Alert
• Back Button
• Breadcrumbs
• Checkbox
• Datetime
• Fab
• Input
• Input Password Toggle
• Item
• Menu Button
• Refresher
• Reorder
• Searchbar
• Select
• Select Modal
• Toggle

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Sep 22, 2026 1:16pm UTC

[ShaneK]

Really nice cleanup, the getter consolidation and the scss hoisting both look great.

One thing worries me and that's the main holdup, the rest is nits.

[ShaneK]

Looks good to me! Great work 🎉