From ecaecf201b1c0c6834c4a383cdca456d4c8eb818 Mon Sep 17 00:00:00 2001 From: Susmita Bhowmik Date: Fri, 24 Apr 2026 09:46:12 -0600 Subject: [PATCH 1/8] feat(icon): add Phosphor icon font support for ionic theme --- core/package-lock.json | 7 ++ core/package.json | 1 + .../components/back-button/back-button.scss | 3 +- .../components/back-button/back-button.tsx | 16 ++-- core/src/css/ionic/_phosphor.scss | 19 +++++ core/src/css/ionic/bundle.ionic.scss | 3 + core/src/utils/icon.tsx | 75 +++++++++++++++++++ 7 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 core/src/css/ionic/_phosphor.scss create mode 100644 core/src/utils/icon.tsx diff --git a/core/package-lock.json b/core/package-lock.json index b30d0b3a1bc..eccb4313782 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@phosphor-icons/core": "^2.1.1", + "@phosphor-icons/web": "^2.1.2", "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" @@ -1895,6 +1896,12 @@ "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ==", "license": "MIT" }, + "node_modules/@phosphor-icons/web": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@phosphor-icons/web/-/web-2.1.2.tgz", + "integrity": "sha512-rPAR9o/bEcp4Cw4DEeZHXf+nlGCMNGkNDRizYHM47NLxz9vvEHp/Tt6FMK1NcWadzw/pFDPnRBGi/ofRya958A==", + "license": "MIT" + }, "node_modules/@playwright/test": { "version": "1.58.2", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz", diff --git a/core/package.json b/core/package.json index 4f7d6a596cb..cc7e36b8a18 100644 --- a/core/package.json +++ b/core/package.json @@ -35,6 +35,7 @@ ], "dependencies": { "@phosphor-icons/core": "^2.1.1", + "@phosphor-icons/web": "^2.1.2", "@stencil/core": "4.43.0", "ionicons": "^8.0.13", "tslib": "^2.1.0" diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index 38d08e45922..861b3f0af14 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -175,7 +175,8 @@ ion-ripple-effect { // Back Button Icon // -------------------------------------------------- -ion-icon { +ion-icon, +i { @include padding( var(--icon-padding-top), var(--icon-padding-end), diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 4c4d738fb7e..59f04e065ce 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -4,6 +4,7 @@ import { Component, Element, Host, Prop, h } from '@stencil/core'; import type { ButtonInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes } from '@utils/helpers'; +import { renderIcon } from '@utils/icon'; import { createColorClasses, hostContext, openURL } from '@utils/theme'; import { arrowBackSharp, chevronBack } from 'ionicons/icons'; @@ -163,14 +164,13 @@ export class BackButton implements ComponentInterface, ButtonInterface { >