{"id":6843,"date":"2026-08-19T18:59:03","date_gmt":"2026-08-19T22:59:03","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6843"},"modified":"2026-08-19T18:59:04","modified_gmt":"2026-08-19T22:59:04","slug":"announcing-ionic-framework-9","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-framework-9","title":{"rendered":"Announcing Ionic Framework 9"},"content":{"rendered":"\n

Ionic Framework 9<\/strong> is here! \ud83d\ude80<\/p>\n\n\n\n

This one took a while, and it gave us a chance to step back and listen to the people using Ionic. On GitHub, Discord, and the Developer Feedback Portal, we kept hearing the same things: better router support, broader Angular compatibility, and upgrades that don’t turn into a weekend project. The community was asking us to keep up.<\/p>\n\n\n\n

So that’s what we did. Ionic Framework 9 brings React Router 6 and Vue Router 5 support, compatibility with Angular 18 through 22, updated Stencil output targets, richer Select options, font icon support, and a new migration tool to make upgrading from v8 easier.<\/p>\n\n\n\n

Here’s what’s new in v9.<\/p>\n\n\n\n\n\n\n\n

React Router v6<\/h2>\n\n\n\n

This was the number one request, and it’s done.<\/p>\n\n\n\n

We’d looked at React Router 6 before and hit a wall. It changed how routing works, and our integration relied on parts of React Router 5 that no longer existed. Supporting v6 meant rethinking that integration from the ground up.<\/p>\n\n\n\n

Ionic now owns how views are retained and cleaned up during navigation rather than relying on React Router’s internals. We chose to support v6 before moving to v7, which gave us the opportunity to validate the new approach and fix long-standing issues along the way, including swipe-to-go-back on parameterized routes. Because Ionic no longer depends on React Router’s internals and with the investment in comprehensive test coverage, moving to v7 should be a much smaller job. React Router 7 is next on our roadmap, and this new integration puts us in a much better position to support it.<\/p>\n\n\n\n

The community also helped test early builds and surfaced issues we wouldn’t have found on our own. Thank you to everyone who took the time to test, report issues, and provide feedback.<\/p>\n\n\n\n

Check out the Migration Guide<\/a> for all the details.
<\/p>\n\n\n\n

Vue Router v5<\/h2>\n\n\n\n

Vue Router 5 support is here, and for most Vue Router 4 users, the upgrade is straightforward. Your routes, navigation guards, and IonRouterOutlet<\/code> integration can stay as they are, with no runtime breaking changes.<\/p>\n\n\n\n

There is one migration to be aware of: calling next()<\/code> in a navigation guard is deprecated in Vue Router 5. The minimum supported Vue version also moves to 3.5<\/code>.<\/p>\n\n\n\n

We also added a Playwright test suite for the Vue Router integration, giving us better coverage today and making future Vue Router upgrades easier to validate.<\/p>\n\n\n\n

Check out the Migration Guide<\/a> for all the details.
<\/p>\n\n\n\n

Angular 18 through 22<\/h2>\n\n\n\n

Ionic Framework 9 supports Angular 18 through 22, giving Angular developers a straightforward path to the latest versions of Angular.<\/p>\n\n\n\n

Zoneless Angular<\/h3>\n\n\n\n

Ionic Framework 9 defaults to zoneless change detection, which Angular 21 enables by default. Ionic’s lifecycle and overlay integrations work with zoneless Angular across all supported versions without requiring workarounds. If you prefer to continue using Zone.js, it’s still supported.<\/p>\n\n\n\n

One thing to keep in mind when using zoneless change detection is that state updates triggered from asynchronous callbacks may need to explicitly notify Angular. For example, state updated after await modal.onWillDismiss()<\/code> or inside a setTimeout()<\/code> may require a signal or markForCheck()<\/code>.<\/p>\n\n\n\n

The Zoneless Guide<\/a> covers these patterns in more detail.<\/p>\n\n\n\n

Angular 22<\/h3>\n\n\n\n

Angular 22 introduces a few additional changes to be aware of when upgrading. Components now default to OnPush<\/code>, and ng update<\/code> handles the migration for you. Angular 22 also requires TypeScript 6.0<\/code> and a newer version of Node. The last two changes in particular are why support for Angular 22 could not be released as part of v8.<\/p>\n\n\n\n

Standalone is now the default import path, so @ionic\/angular\/standalone<\/code> becomes @ionic\/angular<\/code>, and lazy imports move to @ionic\/angular\/lazy<\/code>. The Ionic migration tool handles these import changes automatically.<\/p>\n\n\n\n

Stencil Output Target Updates<\/h2>\n\n\n\n

Ionic’s components are built with Stencil, and its output targets package those components for use in React, Angular, and Vue applications. In v9, we’ve brought all three output targets up to date, including the latest bug fixes and improvements to type checking.<\/p>\n\n\n\n

React and Angular move to their 1.x<\/code> releases, and we’ve also invested in comprehensive test coverage across all three output targets. This gives us a stronger foundation for maintaining them and makes future updates faster and more predictable.<\/p>\n\n\n\n

One important change to note: the React output target now requires React 18 or later. If your application is still using React 16 or 17, you’ll need to upgrade React before moving to Ionic Framework 9.<\/p>\n\n\n\n

Selects with Rich Content<\/h2>\n\n\n\n

Select options in Ionic have always been limited to plain text. If your app needed a contact picker with avatars, a product selector with images, or options with a description below the label, you were left working around the component or building something from scratch.<\/p>\n\n\n\n

In v9, ion-select-option<\/code> supports rich content across all four Select interfaces: alert, action sheet, popover, and modal.<\/p>\n\n\n\n

You can now use start and end slots for images, avatars, icons, and badges, along with a description property for displaying a second line of text.<\/p>\n\n\n\n

Descriptions work out of the box. Slotted markup is opt-in through the innerHTMLTemplatesEnabled<\/code> configuration and is rendered inside the Select overlay, while the closed Select continues to display the option\u2019s plain-text value. Existing plain-text options continue to work exactly as they always have.<\/p>\n\n\n\n

For more information, refer to the Select documentation<\/a>.<\/p>\n\n\n\n

Font Icon Support<\/h2>\n\n\n\n

A lot of teams use font-based icon libraries as part of their design system, whether that’s Bootstrap Icons, Material Symbols, Font Awesome, Phosphor, or another library. Until now, ion-icon<\/code> was designed to work only with SVG icons.<\/p>\n\n\n\n

In v9, ion-icon<\/code> supports font icons alongside the SVG icons you’re already using. Load your icon library’s stylesheet, then place the font icon inside ion-icon<\/code>.<\/p>\n\n\n\n

Properties such as color<\/code>, size<\/code>, and RTL flipping continue to work as expected. When using font icons, use font-size<\/code> to control their size rather than width<\/code> and height<\/code>, since font glyphs are sized through their font properties.<\/p>\n\n\n\n

Ionic Framework 9 also supports slotted SVG content, giving you another option for using custom icons.<\/p>\n\n\n\n

\n
\n
\"Ionicons