## Problem
Page reference icon is vertically misaligned because the
`pageReferenceIcon` class is not applied.
This is because `IconRenderer` does not forward SVG props to the
underlying `AffineIconRenderer` component.
## Fix
Main fix:
- Forward SVG props in `getDocIconComponent`.
- Add support for SVG props in `IconRenderer`.
Side fixes:
- Comment out color in `pageReferenceIcon` style so the icon inherits
its parent color now that the class is actually applied
- Remove hardcoded SVG margin used for vertical alignment.
## Before / After
**Before**
<img width="405" height="163" alt="before"
src="https://github.com/user-attachments/assets/45c6f0c9-d2f8-4295-832a-03018cbe0bf1"
/>
**After**
<img width="404" height="156" alt="after"
src="https://github.com/user-attachments/assets/fa3f955a-b1fd-4bc1-b966-09b5b9d6a7e4"
/>
## Related issues
- Fixes#14978: Makes icon vertically aligned.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved icon rendering so additional display properties are correctly
passed through to Affine icons.
- Updated document icon components to support standard SVG properties,
enabling more consistent customization.
- Refined reference icon styling to allow color inheritance from
surrounding UI context.
- Removed unnecessary spacing beneath reference icons for cleaner
alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#15116
# Issue
Emojipicker keyword filtering only filtered on `tags`, and not `label`.
So searching for an emoji's name would not result in said emoji ending
up in the result. E.G. searching "sunflower" does not make 🌻 appear
# Solution
Adding an extra condition to the filter function to check if the keyword
is a substring of an emoji's label
# Result
Search results now include emojis with that `label`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Improved emoji picker search to include matches on both emoji labels
and tags (case-insensitive), enabling broader search results for better
discoverability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
When the callout block's icon picker is open and the user types in the
search input, pressing backspace deletes content in the main editor
instead of the search text.
## Root Cause
The callout icon picker is mounted via `createPopup` inside
`editor-host`. `PageKeyboardManager` registers a global `Backspace`
handler on the editor host (`keyboard-manager.ts`) with `{ global: true
}`, which fires on every backspace keydown regardless of what element is
focused. Without `stopPropagation`, the backspace event from the search
input bubbles up through the DOM and triggers block deletion.
Other keys are unaffected because the editor handles character input
through `contenteditable` focus, those handlers only act when a
contenteditable node is active.
## Fix
Add `onKeyDown` with `e.stopPropagation()` to the search inputs in both
`EmojiPicker` and `AffineIconPicker`. This matches the existing pattern
already used by `MenuComponent` (`menu-renderer.ts:107`) and all other
interactive components (`date-picker`, `inline-edit`, `prompt-modal`).
## Why not affected elsewhere
`DocIconPicker` uses the same pickers but wraps them in a Radix UI
`Menu` with `modal: true`, which portals outside `editor-host` — so
backspace events never reach the editor's global handler there.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved keyboard event handling in search inputs for icon and emoji
pickers
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Revamped Emoji Picker: grouped browsing with sticky group headers,
footer navigation, and a new EmojiButton for quicker selection.
- Recent emojis with persisted history and single-tap add.
- Programmatic group navigation and callbacks for sticky-group changes.
- Style
- Updated scroll area paddings for emoji and icon pickers.
- Enhanced group header background for better contrast.
- Refactor
- Simplified emoji picker internals for leaner, more responsive
rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Unified icon picker with consistent rendering across the app.
- Picker can auto-close after selection.
- “Remove” now clears the icon selection.
- Refactor
- Icon handling consolidated across editors, navigation, and document
titles for consistent behavior.
- Picker now opens on the Emoji panel by default.
- Style
- Adjusted line-height and selectors for icon picker visuals.
- Chores
- Removed unused emoji-mart dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Icon Picker added with Emoji and Icon panels, search/filtering, recent
selections, color selection, skin tone options, and smooth group
navigation.
- **Documentation**
- Storybook example added to preview and test the Icon Picker.
- **Chores**
- Bumped icon library dependency to a newer minor version.
- Added emoji data dependency to support the Emoji Picker.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Diego Vega Centeno