feat(icon): add font icon support to ion-icon - #31284
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
changed the title
| .input-clear-icon ion-icon { | ||
| width: 100%; | ||
| height: 100%; | ||
| font-size: globals.$ion-font-size-400; |
There was a problem hiding this comment.
This is set to 400 because it renders at 16px with width/height set to 100%
| } | ||
|
|
||
| /* Large */ | ||
| :host(.searchbar-size-large) .searchbar-search-icon, |
There was a problem hiding this comment.
I combined these rules because the .searchbar-search-icon needs font-size too.
|
|
||
| ::slotted(*) ion-icon[slot="icon-only"] { | ||
| font-size: globals.$ion-font-size-600; | ||
| font-size: globals.$ion-font-size-500; |
There was a problem hiding this comment.
This was not using the correct value before. The change to other components to use font-size with ion-icon exposed this as the wrong size.
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Looks fine other than the things I commented on. You'll definitely want to fix the dev build one, though.
|
@brandyscarney could we add to the CONTRIBUTING.md that icons should be using |
|
@brandyscarney almost forgot, please give Susmita co-author for her related work. |
3 participants
Issue number: internal
What is the current behavior?
Ionicons added support for font icons in
ion-icon, but Ionic Framework does not support it.What is the new behavior?
ion-iconusingwidth/heightto usefont-sizeso it will style them for both SVGs and font icons.Does this introduce a breaking change?
Other information
Preview: icon: font
Dev build:
8.8.16-dev.11784841344.1aa1a41c