feat(icon): add font icon support to ion-icon - #1499
Conversation
This reverts commit a912828.
|
|
||
| .icon-inner, | ||
| .icon-inner { | ||
| display: flex; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
This is required to test the ternary in icon.tsx with svg rendering.
There was a problem hiding this comment.
This looks like a lot of changes but I just added describe blocks around the existing tests and added a new one. This is the diff without the describe blocks: https://www.diffchecker.com/o2DUQGp1/
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Looking good! Just a thing I noticed, but I could be off base here
thetaPC
left a comment
thetaPC
left a comment
There was a problem hiding this comment.
LGTM, just minor question
| const page = await newSpecPage({ | ||
| components: [Icon], | ||
| html: `<ion-icon name="chevron-forward" aria-label="custom label"></ion-icon>`, | ||
| describe('slotted content', () => { |
There was a problem hiding this comment.
Should we also have a test for size? Since we check for color and custom styles.
Description
Adds support for slotted content in the
ion-iconcomponent, enabling developers to use custom icons via any content type: font icons, SVGs, or other icon components.Change Type
Rationale / Problems Fixed
Provides flexibility for developers who want to use custom icon implementations alongside SVG icons. The slotted content support allows the
ion-iconcomponent to wrap and style various icon formats (font icons, custom SVGs, icon components) with a unified interface, while developers benefit from all of the ionic framework component styling applied toion-icon.Implementation Details
<slot></slot>support to theion-iconcomponent JSX to accept slotted contentcontain: stricttocontain: layout styleto allow better integration with slotted content::slotted(*)styles to inherit font size from the host element for proper sizingExample Usage
Dev Build
8.0.14-dev.11784821417.1c794397