ionic-team · brandyscarney · Jul 28, 2026 · Jul 10, 2026 · Jul 21, 2026 · Jul 21, 2026
diff --git a/jest.config.mjs b/jest.config.mjs
@@ -6,8 +6,9 @@ import { createJestStencilPreset } from 'jest-stencil-runner';
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
 export default createJestStencilPreset({
-  rootDir: __dirname,  
+  rootDir: __dirname,
   // Add any additional Jest configuration here
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',
     '!src/**/*.d.ts',

diff --git a/jest.setup.js b/jest.setup.js
@@ -0,0 +1,2 @@
+const Stencil = require('@stencil/core');
+Stencil.Build.isBrowser = true;
diff --git a/scripts/readme.md b/scripts/readme.md
@@ -28,12 +28,11 @@ npm start
 
 ## Release Steps
 
-The release script will ask what version to use. After the script completes, double check the `www/cheatsheet.html` to ensure everything is good to go.
-
-Next, update `CHANGELOG.md`, then commit and push your changes Github.
-
-```sh
-npm run release
-```
-
-Triple check the version number is correct, and choose which tag this should be released as. If it's a pre-release, it should be `dev`.
+Releases are automated via GitHub Actions. To trigger a release:
+
+1. Go to the [Release Orchestrator](https://github.com/ionic-team/ionicons/actions/workflows/release-orchestrator.yml) workflow
+2. Click "Run workflow"
+3. Select the release type:
+   - **dev** — Creates a pre-release with a timestamp-based version (e.g., `8.0.14-dev.11784821417.1c794397`)
+   - **production** — Creates a semver release; select `patch`, `minor`, or `major`
+4. The workflow will build, publish to NPM, and create a GitHub release (for production releases)
diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
@@ -4,12 +4,13 @@
   width: 1em;
   height: 1em;
 
-  contain: strict;
+  font-size: 1em;
+
+  contain: layout style;
 
   fill: currentColor;
 
   box-sizing: content-box !important;
-
 }
 
 :host .ionicon {
@@ -24,7 +25,16 @@
   stroke-width: var(--ionicon-stroke-width, 32px);
 }
 
-.icon-inner,
+.icon-inner {
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
 .ionicon,
 svg {
   display: block;
@@ -33,6 +43,14 @@ svg {
   width: 100%;
 }
 
+/* Slotted Content
+ * -----------------------------------------------------------
+ */
+
+::slotted(*) {
+  font-size: inherit !important;
+}
+
 /* Icon RTL
  * -----------------------------------------------------------
  */

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -221,7 +221,9 @@ export class Icon {
         {Build.isBrowser && this.svgContent ? (
           <div class="icon-inner" innerHTML={this.svgContent}></div>
         ) : (
-          <div class="icon-inner"></div>
+          <div class="icon-inner">
+            <slot></slot>
+          </div>
         )}
       </Host>
     );

diff --git a/src/components/icon/test/a11y/index.html b/src/components/icon/test/a11y/index.html
@@ -8,6 +8,9 @@
     <script nomodule src="/build/ionicons.js"></script>
     <link rel="stylesheet" href="../styles.css" />
     <script src="../header.js"></script>
+
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
   </head>
 
   <body>
@@ -16,16 +19,41 @@
     <main>
       <h1>Icon - Accessibility</h1>
 
-      <h2>Icon with aria-label</h2>
+      <h2>SVG icon with aria-label</h2>
       <ion-icon name="cellular" aria-label="Mobile data"></ion-icon>
 
-      <h2>Button with aria-label</h2>
+      <h2>Button with aria-label and SVG icon</h2>
       <button aria-label="Mobile data">
         <ion-icon name="cellular" aria-hidden="true"></ion-icon>
       </button>
 
-      <h2>Icon with aria-hidden</h2>
+      <h2>SVG icon with aria-hidden</h2>
       <ion-icon name="cellular" aria-hidden="true"></ion-icon>
+
+      <hr />
+
+      <h2>Font icon with aria-label</h2>
+      <ion-icon aria-label="Mobile data">
+        <i class="fa fa-home"></i>
+      </ion-icon>
+
+      <h2>Button with aria-label and font icon</h2>
+      <button aria-label="Mobile data">
+        <ion-icon aria-hidden="true">
+          <i class="fa fa-home"></i>
+        </ion-icon>
+      </button>
+
+      <h2>Font icon with aria-hidden</h2>
+      <ion-icon aria-hidden="true">
+        <i class="fa fa-home"></i>
+      </ion-icon>
     </main>
+
+    <style>
+      ion-icon {
+        font-size: 32px;
+      }
+    </style>
   </body>
 </html>
diff --git a/src/components/icon/test/basic/index.html b/src/components/icon/test/basic/index.html
@@ -88,6 +88,10 @@ <h2>Custom CSS</h2>
     </main>
 
     <style>
+      ion-icon {
+        font-size: 32px;
+      }
+
       .custom {
         stroke: red;
         fill: blue;

diff --git a/src/components/icon/test/csp/index.html b/src/components/icon/test/csp/index.html
@@ -39,6 +39,10 @@ <h2>Default</h2>
   </body>
 
   <style>
+    ion-icon {
+      font-size: 32px;
+    }
+
     .custom {
       stroke: red;
       fill: goldenrod;

diff --git a/...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Chrome-linux.png b/...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Chrome-linux.png
diff --git a/...t/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Firefox-linux.png b/...t/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Firefox-linux.png
diff --git a/...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Safari-linux.png b/...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Safari-linux.png
diff --git a/src/components/icon/test/dynamic-type/index.html b/src/components/icon/test/dynamic-type/index.html
@@ -8,6 +8,9 @@
     <script nomodule src="/build/ionicons.js"></script>
     <link rel="stylesheet" href="../styles.css" />
     <script src="../header.js"></script>
+
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
   </head>
 
   <body>
@@ -16,9 +19,21 @@
     <main>
       <h1>Icon - Dynamic Type</h1>
 
+      <h2>Default Icons</h2>
       <ion-icon name="star"></ion-icon>
       <ion-icon name="star" size="small"></ion-icon>
       <ion-icon name="star" size="large"></ion-icon>
+
+      <h2>Font Icons</h2>
+      <ion-icon>
+        <i class="fa fa-star"></i>
+      </ion-icon>
+      <ion-icon size="small">
+        <i class="fa fa-star"></i>
+      </ion-icon>
+      <ion-icon size="large">
+        <i class="fa fa-star"></i>
+      </ion-icon>
     </main>
 
     <style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const Stencil = require('@stencil/core');
		Stencil.Build.isBrowser = true;
Comment on lines +1 to +2