Icon - Slotted Content
+ +Material Icons
++ +
+ +
Phosphor Icons
++ +
+ +
Font Awesome Icons
++ +
+ +
Bootstrap Icons
++ +
+ +
Custom Slotted SVG
++ +
+ +
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 ? ( -
- ) : ( - - )} +SVG content sanitization and security
+ + +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 @@ + + +
+ + +
+ + + + + + + + + + + + + + + +
+