Announcing Ionic 8.7

Ionic Framework 8.7 is here! This release delivers powerful new features that enhance developer productivity and user experience. From new CSS utility classes that streamline layout development to new Reorder events that provide fine-grained control, plus the latest Ionicons v8 update and Angular modal injection improvements, 8.7 brings the tools you need to create exceptional cross-platform applications.

Discover the latest enhancements that make Ionic Framework even more powerful. 👇

New Reorder Events

We’ve significantly improved the reorder experience with new events that provide better control and feedback during reorder operations.

New Events

• ionReorderStart — Fires at the start of the reorder gesture without any details
• ionReorderMove — Fires continuously during the gesture with from and to details for real-time feedback
• ionReorderEnd — Fires at the end of the gesture with from and to details, even if they’re the same

These events give developers fine-grained control over the reorder experience, enabling custom animations, validation, and state management during drag operations, such as dynamically showing or hiding icons and updating item order in real time as the user drags.

Deprecated Event

ionItemReorder has been deprecated in favor of ionReorderEnd to improve consistency across event names. Going forward, event names follow a structure of action + timing (such as Start, Move, or End) to make their purpose more explicit and to allow for better scalability as new events are added.

If you are accessing event.detail.from or event.detail.to and relying on them being different you should now add checks as they are always emitted in ionReorderEnd, even when they are the same.

Example Migration:

// Before
reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
  console.log('ionItemReorder: Dragged from index', detail.from, 'to', detail.to);
  
  detail.complete();
});

// After
reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
  if (detail.from !== detail.to) {
    console.log('ionReorderEnd: Dragged from index', detail.from, 'to', detail.to);
  } else {
    console.log('ionReorderEnd: No position change occurred');
  }

  detail.complete();
});

See the Reorder Group documentation and Reorder documentation for more information.

New Datetime highlightedDates Property

The Datetime component now supports a new border property for highlightedDates, giving developers more control over the visual styling of highlighted dates.

See the Datetime documentation for more information.

New CSS Utility Classes

We’ve added a comprehensive set of new CSS utility classes for display and flexbox utilities, making it easier to create responsive and flexible layouts.

New Display Classes

Responsive display classes have been added with the following values: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-cell, table-row

See the CSS Utilities documentation for more information.

New Flex Classes

Responsive flex classes have been added for the following properties: align-content, align-items, align-self, justify-content, flex-direction, flex-wrap, flex, flex-grow, flex-shrink, order

See the CSS Utilities documentation for more information.

Deprecated Classes

• The ion-hide-* classes have been deprecated as the new ion-display-* classes offer expanded functionality and fully replace the need for them. See the CSS Utilities documentation for more information.
• To improve naming consistency and reduce the risk of class name conflicts with future utility classes, ion-nowrap, ion-wrap and ion-wrap-reverse have been deprecated in favor of ion-flex-nowrap, ion-flex-wrap and ion-flex-wrap-reverse. See the CSS Utilities documentation for more information.

Example Migration:

<!-- Before -->
<div class="ion-hide-sm-down">Hide on small devices only</div>
<div class="ion-wrap">Flex wrap</div>

<!-- After -->
<div class="ion-display-none ion-display-sm-block">Hide on small devices only</div>
<div class="ion-flex-wrap">Flex wrap</div>

File Size Impact

The addition of these utility classes has increased the file sizes of both display.css and flex-utils.css. While these files are included by default in new Ionic Framework apps, they are optional. If you don’t need these utility classes, you can remove the imports from your project. The file where these imports are located depends on the framework, as outlined in the table below:

Framework	File Location
Angular	src/global.scss
React	src/App.tsx
Vue	src/main.ts

See the Global Stylesheets documentation for more information.

Latest Ionicons

Ionicons has been updated to version 8, bringing the latest icon designs and improvements to your Ionic Framework applications.

What’s New

• New icons added to the library
• Enhanced Safari SVG rendering compatibility
• Better theming with currentColor applied to icons
• Improved documentation and icon organization
• Various performance improvements and bug fixes

See the Ionicons website to explore all available icons. For detailed release information, check out the Ionicons v8 release notes.

Angular IonModalToken for Modal Injection

We’ve added an IonModalToken to provide easier programmatic access to modal elements and their events in Angular components. This enhancement allows you to directly access Modal internals and connect to Modal events through dependency injection.

Benefits:

• Type Safety: Full TypeScript support with proper typing for the modal element
• Angular Integration: Works seamlessly with Angular’s dependency injection system
• Simplified Code: Eliminates the need for ViewChild queries or manual element references
• Better Testing: Easier to mock and test components that use injection tokens

Example Usage:

export class ModalComponent implements OnInit {
  private modalToken = inject(IonModalToken);

  ngOnInit() {
    this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
      console.log('Modal did dismiss:', event.detail);
    });
  }
}

See the Angular Injection Tokens documentation for more information.

Community Highlights

Our interns from Madison College and UW Madison’s Open Source Programming Office have made significant contributions over the past two months! Colin, Joey and Kendra helped resolve framework bugs and brought several areas of our documentation up to date, making it easier for developers to get started and find accurate information when using Ionic Framework. Their fresh perspectives and enthusiasm were a valuable addition to the project. With their internship now complete, we’re looking forward to welcoming more interns next summer.

We also want to extend a special thank you to our community contributors. Whether through bug reports, feature requests, or code contributions, your involvement continues to make Ionic Framework more stable and dependable for everyone.

What’s Next

We’re continuing to work on several exciting features for future releases:

• React Router — We’re actively working on comprehensive React Router v6+ support, documenting all necessary changes and updating our internal codebase to ensure seamless compatibility with the latest versions. This will provide developers with improved routing capabilities and better integration with modern React applications.
• Modular Ionic Framework — We’re exploring a groundbreaking modular architecture that will revolutionize how developers use Ionic Framework. This new approach will allow developers to selectively import only the “feel” of Ionic (page transitions, platform styles, etc.) with or without the “look” (Material Design, iOS styles). Additionally, it will enable complete customization through custom theme creation and selective import of official themes. While this work is in its early stages, we believe this modular approach will unlock unprecedented flexibility for the Ionic community.

We hope you’ll try out the latest improvements and let us know how they’re working for you. Your feedback helps shape the future of Ionic Framework. Thank you for being an essential part of the Ionic community! 💙