Announcing Ionic 7.5

We are excited to announce a huge update to Ionic Framework! This release brings improvements for accessibility, Angular development, Datetime, Toast, and more.

Let’s take a look at some of the great features in this release 👇

Dynamic Font Scaling

Ionic 7.5 brings a new accessibility feature called “Dynamic Font Scaling.” Both iOS and Android have system-level settings that allow users to scale text up or down on their devices. This feature helps users who need larger text for better readability, while also accommodating users who prefer smaller text, allowing more information to appear on the screen.

The team has been working hard over the past several months to build a simple and consistent font scaling experience that developers can enable in their apps.

As part of this change most Ionic UI components have been updated to use rem units instead of px units where appropriate. This allows us to scale all components that participate in Dynamic Font Scaling in a consistent way.

See the Dynamic Font Scaling documentation for more information on this feature.

Dynamic Font Scaling is an opt-in feature on iOS starting in Ionic 7.5 and will be enabled by default in Ionic 8. Dynamic Font Scaling on Android is enabled by default starting in Ionic 7.5.

Angular Standalone Components

In Ionic 6.3 we added support for building Angular apps that use a standalone component architecture. We are very excited to announce that starting in Ionic 7.5, developers will be able to import Ionic UI components as Angular standalone components!

Using Ionic UI components as Angular standalone components has several benefits for developers:

1. The final bundle size of many applications will decrease due to improved treeshaking compatibility. This includes removing Ionicon SVGs that are not used.
2. Application load will be improved for many applications. Ionic standalone components make use of the same build system that Ionic React and Ionic Vue use which avoids hydration.
3. Since Ionic standalone components can be statically analyzed, developers will be able to make use of newer features in their Angular applications such as ESBuild.

See the Angular Build Options documentation for more information on this feature. This page also includes a step by step guide on how to migrate existing Ionic Angular applications to use Ionic standalone components.

The team is hard at work on an automated migration utility for Ionic standalone components. Stay tuned for more news on this!

Update: The team is pleased to announce an experimental migration utility for Ionic standalone components! See https://github.com/ionic-team/ionic-angular-standalone-codemods for more information.

Toast Anchor Positioning

The Toast component is designed to overlay an application to provide useful information about the state of the app. However, Toast can sometimes block important parts of the user interface when components such as TabBar or Fab are used.

The new positionAnchor property makes it easy to anchor the Toast above or below a UI component so the Toast does not cover it.

<ion-toast message="Your playlist was created successfully" position-anchor="my-tabbar"></ion-toast>

<ion-tabs>
  <ion-tab-bar id="my-tabbar" slot="bottom">
    …
  </ion-tab-bar>
</ion-tabs>

See the Toast documentation for more information on this feature.

Datetime h11 and h24 Hour Cycle Support

We updated the Datetime component to support h11 and h24 hour cycles for displaying times. This feature joins the existing support for h12 and h23 hour cycles.

<!-- This would render the time as "0:00 AM" –>
<ion-datetime hour-cycle="h11" locale="en-US" presentation="time" value="2023-01-01T00:00"></ion-datetime>

See the Datetime documentation for more information on this feature.

openURL utility

The openURL function was exposed to help developers using ion-router more easily push routes.

Thanks to @fpladano for contributing this feature!

Developers can install Ionic 7.5 from the latest tag on NPM:

# Ionic Angular apps

npm install @ionic/angular@latest

# Ionic React apps

npm install @ionic/react@latest @ionic/react-router@latest

# Ionic Vue apps

npm install @ionic/vue@latest @ionic/vue-router@latest

# All other Ionic apps

npm install @ionic/core@latest

Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!