Skip to content

feat(icon): add font icon support to ion-icon #1499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brandyscarney wants to merge 7 commits into
base: chore/ionicons-align-build-tests
Choose a base branch
from
Open

feat(icon): add font icon support to ion-icon #1499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58ca62c
Revert "revert(icon): revert slotted font support"
brandyscarney Jul 22, 2026
4dfa798
test(icon): add tests for slotted font icons
brandyscarney Jul 22, 2026
f5157b9
chore(): add updated snapshots
Ionitron Jul 22, 2026
51f33b5
fix(icon): remove double div on svgs and render height correctly
brandyscarney Jul 23, 2026
c794397
test(icon): lint and fix paths
brandyscarney Jul 23, 2026
c7205a2
test(icon): add spec tests for svg rendering
brandyscarney Jul 23, 2026
f2f328f
style: lint
brandyscarney Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion jest.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions jest.setup.js
View file
Open in desktop

@brandyscarney brandyscarney Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is required to test the ternary in icon.tsx with svg rendering.

Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const Stencil = require('@stencil/core');
Stencil.Build.isBrowser = true;
24 changes: 21 additions & 3 deletions src/components/icon/icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -24,7 +25,16 @@
stroke-width: var(--ionicon-stroke-width, 32px);
}

.icon-inner,
.icon-inner {
display: flex;

@brandyscarney brandyscarney Jul 23, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need flex here for the font icons, otherwise they are shifted to the right and down. Since developers can't override this, we could expose this as a part if it's an issue.


align-items: center;
justify-content: center;

width: 100%;
height: 100%;
}

.ionicon,
svg {
display: block;
Expand All @@ -33,6 +43,14 @@ svg {
width: 100%;
}

/* Slotted Content
* -----------------------------------------------------------
*/

::slotted(*) {
font-size: inherit !important;
}

/* Icon RTL
* -----------------------------------------------------------
*/
Expand Down
4 changes: 3 additions & 1 deletion src/components/icon/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
28 changes: 25 additions & 3 deletions src/components/icon/test/a11y/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -16,16 +19,35 @@
<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 name="cellular" 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 name="cellular" aria-hidden="true">
<i class="fa fa-home"></i>
</ion-icon>
</button>

<h2>Font icon with aria-hidden</h2>
<ion-icon name="cellular" aria-hidden="true">
<i class="fa fa-home"></i>
</ion-icon>
</main>
</body>
</html>
44 changes: 22 additions & 22 deletions src/components/icon/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,29 +51,29 @@ <h2>Stroke width</h2>

<h2>Font size</h2>
<ion-icon name="book" style="font-size: 50px"></ion-icon>
<ion-icon src="../assets/bug_report.svg" style="font-size: 50px"></ion-icon>
<ion-icon src="../../assets/bug_report.svg" style="font-size: 50px"></ion-icon>

<h2>Custom SVGs</h2>
<ion-icon src="../assets/bug_report.svg"></ion-icon>
<ion-icon src="../assets/chat.svg"></ion-icon>
<ion-icon src="../assets/commute.svg"></ion-icon>
<ion-icon src="../assets/copyright.svg"></ion-icon>
<ion-icon src="../assets/done_all.svg"></ion-icon>
<ion-icon src="../assets/lock_open.svg"></ion-icon>
<ion-icon src="../assets/toll.svg"></ion-icon>
<ion-icon src="../assets/web_asset.svg"></ion-icon>
<ion-icon src="../assets/work_outline.svg"></ion-icon>
<ion-icon src="../../assets/bug_report.svg"></ion-icon>
<ion-icon src="../../assets/chat.svg"></ion-icon>
<ion-icon src="../../assets/commute.svg"></ion-icon>
<ion-icon src="../../assets/copyright.svg"></ion-icon>
<ion-icon src="../../assets/done_all.svg"></ion-icon>
<ion-icon src="../../assets/lock_open.svg"></ion-icon>
<ion-icon src="../../assets/toll.svg"></ion-icon>
<ion-icon src="../../assets/web_asset.svg"></ion-icon>
<ion-icon src="../../assets/work_outline.svg"></ion-icon>

<h2>Custom SVGs: colors</h2>
<ion-icon color="primary" src="../assets/bug_report.svg"></ion-icon>
<ion-icon color="secondary" src="../assets/chat.svg"></ion-icon>
<ion-icon color="tertiary" src="../assets/commute.svg"></ion-icon>
<ion-icon color="success" src="../assets/copyright.svg"></ion-icon>
<ion-icon color="warning" src="../assets/done_all.svg"></ion-icon>
<ion-icon color="danger" src="../assets/lock_open.svg"></ion-icon>
<ion-icon color="light" src="../assets/toll.svg"></ion-icon>
<ion-icon color="medium" src="../assets/web_asset.svg"></ion-icon>
<ion-icon color="dark" src="../assets/work_outline.svg"></ion-icon>
<ion-icon color="primary" src="../../assets/bug_report.svg"></ion-icon>
<ion-icon color="secondary" src="../../assets/chat.svg"></ion-icon>
<ion-icon color="tertiary" src="../../assets/commute.svg"></ion-icon>
<ion-icon color="success" src="../../assets/copyright.svg"></ion-icon>
<ion-icon color="warning" src="../../assets/done_all.svg"></ion-icon>
<ion-icon color="danger" src="../../assets/lock_open.svg"></ion-icon>
<ion-icon color="light" src="../../assets/toll.svg"></ion-icon>
<ion-icon color="medium" src="../../assets/web_asset.svg"></ion-icon>
<ion-icon color="dark" src="../../assets/work_outline.svg"></ion-icon>

<h2>Custom CSS</h2>
<ion-icon class="custom" name="grid"></ion-icon>
Expand All @@ -82,9 +82,9 @@ <h2>Custom CSS</h2>
<ion-icon class="custom" name="logo-react"></ion-icon>
<ion-icon class="custom" name="logo-javascript"></ion-icon>
<ion-icon class="custom" name="logo-angular"></ion-icon>
<ion-icon class="custom" src="../assets/done_all.svg"></ion-icon>
<ion-icon class="custom" src="../assets/web_asset.svg"></ion-icon>
<ion-icon class="custom" src="../assets/work_outline.svg"></ion-icon>
<ion-icon class="custom" src="../../assets/done_all.svg"></ion-icon>
<ion-icon class="custom" src="../../assets/web_asset.svg"></ion-icon>
<ion-icon class="custom" src="../../assets/work_outline.svg"></ion-icon>
</main>

<style>
Expand Down
Binary file modified ...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...st/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions src/components/icon/test/dynamic-type/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading
Loading