From 58ca62c039dac7949e1c5c33c0afe71bf1bad075 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 22 Jul 2026 12:18:00 -0400 Subject: [PATCH 1/7] Revert "revert(icon): revert slotted font support" This reverts commit a9128285add568f3ac9082e4f15e484208ea9039. --- src/components/icon/icon.css | 20 +- src/components/icon/icon.tsx | 9 +- src/components/icon/test/icon.spec.ts | 83 +++++- src/components/icon/test/index.html | 5 + src/components/icon/test/slotted/index.html | 304 ++++++++++++++++++++ 5 files changed, 408 insertions(+), 13 deletions(-) create mode 100644 src/components/icon/test/slotted/index.html diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css index 4c22da6e9..588925ad3 100644 --- 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,12 @@ stroke-width: var(--ionicon-stroke-width, 32px); } -.icon-inner, +.icon-inner { + display: flex; + align-items: center; + justify-content: center; +} + .ionicon, svg { display: block; @@ -33,6 +39,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 index 2fb162c94..c37496b64 100755 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -218,11 +218,10 @@ export class Icon { }} {...inheritedAttributes} > - {Build.isBrowser && this.svgContent ? ( -
- ) : ( -
- )} +
+ {Build.isBrowser && this.svgContent ?
: null} + +
); } diff --git a/src/components/icon/test/icon.spec.ts b/src/components/icon/test/icon.spec.ts index f728abef8..5ff4fd2b7 100644 --- a/src/components/icon/test/icon.spec.ts +++ b/src/components/icon/test/icon.spec.ts @@ -10,7 +10,9 @@ describe('icon', () => { expect(root).toEqualHtml(` -
+
+ +
`); @@ -26,7 +28,9 @@ describe('icon', () => { expect(root).toEqualHtml(` `); @@ -41,7 +45,9 @@ describe('icon', () => { expect(root).toEqualHtml(` -
+
+ +
`); @@ -58,7 +64,9 @@ describe('icon', () => { expect(icon).toEqualHtml(` -
+
+ +
`); @@ -71,9 +79,74 @@ describe('icon', () => { expect(icon).toEqualHtml(` -
+
+ +
`); }); + + it('renders slotted font icon (Font Awesome)', async () => { + const { root } = await newSpecPage({ + components: [Icon], + html: ` + + + + `, + }); + expect(root).toEqualHtml(` + + +
+ +
+
+ +
+ `); + }); + + it('renders slotted font icon with color', async () => { + const { root } = await newSpecPage({ + components: [Icon], + html: ` + + + + `, + }); + expect(root).toEqualHtml(` + + +
+ +
+
+ +
+ `); + }); + + it('renders slotted font icon with custom style', async () => { + const { root } = await newSpecPage({ + components: [Icon], + html: ` + + + + `, + }); + expect(root).toEqualHtml(` + + +
+ +
+
+ +
+ `); + }); }); diff --git a/src/components/icon/test/index.html b/src/components/icon/test/index.html index 239ff1994..b14232759 100644 --- a/src/components/icon/test/index.html +++ b/src/components/icon/test/index.html @@ -50,6 +50,11 @@

RTL

Sanitization

SVG content sanitization and security

+ + +

Slotted Content

+

Font Awesome, Material, Phosphor, Bootstrap, and custom SVGs

+
diff --git a/src/components/icon/test/slotted/index.html b/src/components/icon/test/slotted/index.html new file mode 100644 index 000000000..95df86037 --- /dev/null +++ b/src/components/icon/test/slotted/index.html @@ -0,0 +1,304 @@ + + + + + + Icon - Slotted Content + + + + + + + + + + + + + + + + + + +
+

Icon - Slotted Content

+ +
+
+

Material Icons

+ + home + + + favorite + + + star + + + person + + + settings + + +
+ + + home + + + favorite + + + star + + + warning + + + delete + + +
+ + + home + + + favorite + + + star + +
+ +
+

Phosphor Icons

+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ +
+

Font Awesome Icons

+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ +
+

Bootstrap Icons

+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + +
+ +
+

Custom Slotted SVG

+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+
+
+ + From 4dfa79823b2e2e30226c69984ab091f78db7203e Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 22 Jul 2026 12:36:18 -0400 Subject: [PATCH 2/7] test(icon): add tests for slotted font icons --- src/components/icon/test/a11y/index.html | 28 +++++++++++++++++-- .../icon/test/dynamic-type/index.html | 15 ++++++++++ src/components/icon/test/slotted/icon.e2e.ts | 13 +++++++++ 3 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 src/components/icon/test/slotted/icon.e2e.ts diff --git a/src/components/icon/test/a11y/index.html b/src/components/icon/test/a11y/index.html index 8e5792982..704232d1b 100644 --- a/src/components/icon/test/a11y/index.html +++ b/src/components/icon/test/a11y/index.html @@ -8,6 +8,9 @@ + + + @@ -16,16 +19,35 @@

Icon - Accessibility

-

Icon with aria-label

+

SVG icon with aria-label

-

Button with aria-label

+

Button with aria-label and SVG icon

-

Icon with aria-hidden

+

SVG icon with aria-hidden

+ +
+ +

Font icon with aria-label

+ + + + +

Button with aria-label and font icon

+ + +

Font icon with aria-hidden

+
diff --git a/src/components/icon/test/dynamic-type/index.html b/src/components/icon/test/dynamic-type/index.html index 120bd8989..4c1b6a052 100644 --- a/src/components/icon/test/dynamic-type/index.html +++ b/src/components/icon/test/dynamic-type/index.html @@ -8,6 +8,9 @@ + + + @@ -16,9 +19,21 @@

Icon - Dynamic Type

+

Default Icons

+ +

Font Icons

+ + + + + + + + +