chore(styles): remove ion-icon and share the arrow mask mixin

[thetaPC]

Issue URL: internal

What is the current behavior?

<ion-icon> renders nothing on the docs site. No package provides it and no script registers it, so it's an empty element wherever it appears. Confirmed in production as well as locally.

Three usages in src/:

• AppWizard — an arrow on the "Open Wizard" button. The only live one, and invisible.
• DocsCard — guarded by an ionicon prop that 0 of 428 <DocsCard> invocations pass.
• DocDemo — commented out, with its CSS still present.

What is the new behavior?

ion-icon is gone from src/ entirely, including its type declaration, so it can't come back unnoticed.

• The App Wizard arrow is drawn with static/icons/arrow-forward-outline.svg, already in the repo and already used this way by the navbar CTA
• That technique is now an icon-mask mixin in a new src/styles/_mixins.scss, shared by both callers instead of hand-rolled twice
• The dead DocsCard branch, its ionicon prop, and .Card-ionicon CSS are removed, along with DocDemo's commented-out element and orphaned rule

The three remaining custom elements are typed properly rather than any:

'device-preview': CustomElementProps & { mode?: 'ios' | 'md' };
'docs-card':      CustomElementProps;
'docs-cards':     CustomElementProps;

<docs-cards clazz={1}> is now a type error where it used to compile.

Does this introduce a breaking change?

• Yes
• No

One visible change, and it's the point: the App Wizard arrow now appears.

Other information

The 121 <ion-icon> references in markdown are untouched. Every one is inside a code fence, teaching readers to use it in their own apps. ion-icon also still works inside playground demos, since those iframes load Ionic from a CDN. Only the docs chrome was affected.

The mixin takes $url as an argument rather than owning it. The two callers need different depths for the same file, ../../ from the navbar partial and ../../../../../ from the CSS module, because Sass inlines partials into custom.scss while a module resolves from its own directory. That's documented in the mixin, since it's the part that will catch someone out.

Audit of the other two tags, for the record: device-preview is genuinely registered via defineCustomElement(), and docs-card/docs-cards have no JS definition but are load-bearing CSS hooks for the card grid. Both are fine as-is.

[vercel]

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

Project	Deployment	Actions	Updated
ionic-docs	Ready	Preview	Sep 3, 2026 10:38pm UTC