feat(Accordion): support emoji icon by kevinports · Pull Request #1492 · readmeio/markdown

kevinports · 2026-05-27T15:56:49Z

🎫 Resolve RM-16937

🎯 What does this PR do?

Adds emoji icon support to the Accordion component alongside existing Font Awesome icon support.

This is necessary because the new WYSIWYG accordion UI in our editor supports selecting both Font Awesome and emoji icons https://github.com/readmeio/readme/pull/19025

🧪 QA tips

Paste each snippet into a ReadMe doc and confirm the accordion renders correctly.

Emoji icon

<Accordion icon="🚀" title="Emoji Icon">
Content inside the accordion.
</Accordion>

A 🚀 emoji appears to the left of the title
The accordion opens/closes on click

Font Awesome icon (existing behavior, no regression)

<Accordion icon="fa-book" title="FA Icon">
Content inside the accordion.
</Accordion>

A duotone book icon appears to the left of the title

Font Awesome icon with color (no regression)

<Accordion icon="fa-star" iconColor="red" title="Colored Icon">
Content inside the accordion.
</Accordion>

Icon renders in red; emoji icons are unaffected by iconColor

No icon (no regression)

<Accordion title="No Icon">
Content inside the accordion.
</Accordion>

No icon element rendered, title appears alone

📸 Screenshot or Loom

kevinports · 2026-05-27T17:26:33Z

+/** @see https://docs-v5.fontawesome.com/web/reference-icons */
+const FA_PREFIXES = new Set(['fab', 'fad', 'far']);


We use the @ui/EmojiPicker component in the Accordion wysiwyg block in the MdxishEditor in the monorepo. @ui/EmojiPicker allows a user to select between solid and duotone font awesome variants and will emit values with these class prefixes to differentiate those variants.

So the icon prop could receive values like fad fa-smile or far fa-smile instead of just fa-smile.

Accounting for that here and falling back to duotone if no prefix is provided.

do we not need to support fal and fas as well?

Yeah there a bunch of possible classes but I'm matching what our UI sets here https://github.com/readmeio/readme/blob/next/packages/react/src/ui/EmojiPicker/index.tsx#L23

maximilianfalco

lgtm! tested this both in the monorepo and the demo app and they both work nicely! just one non blocking question about the FA prefixes!

maximilianfalco · 2026-05-28T01:14:35Z

+/** @see https://docs-v5.fontawesome.com/web/reference-icons */
+const FA_PREFIXES = new Set(['fab', 'fad', 'far']);


do we not need to support fal and fas as well?

eaglethrost

@kevinports Did some quick fontawesome research and I think you need to also include 'fas', 'fal', 'fat' in the FA_PREFIXES as well as it won't render the icon anymore.

Given these accordions:

<Accordion icon="fas fa-star" title="Solid star (fas)">
</Accordion>

<Accordion icon="fal fa-book" title="Light book (fal)">
</Accordion>

<Accordion icon="fat fa-bell" title="Thin bell (fat)">
</Accordion>

Before:

After:

Other than that, the changes work nicely!

eaglethrost · 2026-05-28T01:23:04Z

    <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
      <summary className="Accordion-title">
        <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-regular fa-chevron-right`}></i>
-        {icon && <i className={`Accordion-icon fa-duotone fa-solid ${icon}`} style={{ color: `${iconColor}` }}></i>}


Is it fine to not have the fa-duotone class anymore?

Yep it's replaced with the fad ${icon} class from L15 above. fad is the shorthand for fa-dutotone.

kevinports · 2026-06-04T18:46:40Z

@eaglethrost I made some bigger changes after realizing we'll need to support the emoji & different font-awesome icons across other built-in components as well.

eaglethrost

Yep changes looks good to me!

kevinports · 2026-06-05T21:02:39Z

@eaglethrost wanted to also call out my comment here #1498 (review)

We should probably take a pass at verifying that these changes dont cause any regressions for users with custom css targeting the current icon DOM and classnames the engine compiles to! Otherwise I think this is ready to rock and roll.

eaglethrost · 2026-06-09T07:31:37Z

@eaglethrost wanted to also call out my comment here #1498 (review)

We should probably take a pass at verifying that these changes dont cause any regressions for users with custom css targeting the current icon DOM and classnames the engine compiles to! Otherwise I think this is ready to rock and roll.

Yep! Overall the changes here are fine because we're still using <i> to render Icons & the base classes are already passed in, so I anticipate it'll be fine for most cases. But there's 2 specific CSS rule that'll break:

If the rule refers to the now removed --Card-icon-color style variable
If the rule specifically targets the now removed fa-duotone or fa-solid class attributes

I think it should be unlikely to happen, users would need to inspect the HTML to be aware of them, but I could see it happen occasionally, so I think this is fine but we should keep an eye out.

Update: I think 1) looks like a niche case, but we should address 2), so I've reused the current fa-duotone and fa-solid classes to maintain the same class

kevinports added 3 commits May 27, 2026 10:49

feat(Accordion): support emoji icon

fbc5ba8

chore: cleanup

4297602

fix: support font-awesome prefixes used in icon prop value

98ee96c

kevinports commented May 27, 2026

View reviewed changes

kevinports marked this pull request as ready for review May 27, 2026 20:19

kevinports requested review from eaglethrost, jamestclark and maximilianfalco May 27, 2026 20:19

maximilianfalco previously approved these changes May 28, 2026

View reviewed changes

eaglethrost reviewed May 28, 2026

View reviewed changes

feat: extend icon improvements into other built in components

cf2dbe8

kevinports requested a review from eaglethrost June 4, 2026 18:46

eaglethrost previously approved these changes Jun 5, 2026

View reviewed changes

eaglethrost mentioned this pull request Jun 5, 2026

feat(mdxish): always compile callouts to JSX in mdxishMdastToMd #1498

Open

4 tasks

Merge branch 'next' into feat/accordion/support-emoji

82fec06

kevinports requested review from a team, darrenyong and flinehan June 5, 2026 15:16

gkoberger force-pushed the feat/accordion/support-emoji branch from 82fec06 to fa33152 Compare June 7, 2026 00:20

jboyens force-pushed the feat/accordion/support-emoji branch from fa33152 to 82fec06 Compare June 8, 2026 18:00

fix: reuse fad classes

84e5038

eaglethrost requested review from davinhazard and removed request for darrenyong and flinehan June 9, 2026 07:45

jamestclark approved these changes Jun 12, 2026

View reviewed changes

kevinports dismissed eaglethrost’s stale review via 84e5038 June 16, 2026 00:37

kevinports dismissed maximilianfalco’s stale review via 84e5038 June 16, 2026 00:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Accordion): support emoji icon#1492

feat(Accordion): support emoji icon#1492
kevinports wants to merge 6 commits into
nextfrom
feat/accordion/support-emoji

kevinports commented May 27, 2026 •

edited

Loading

Uh oh!

kevinports May 27, 2026

Uh oh!

maximilianfalco May 28, 2026

Uh oh!

kevinports Jun 1, 2026

Uh oh!

maximilianfalco left a comment

Uh oh!

maximilianfalco May 28, 2026

Uh oh!

eaglethrost left a comment

Uh oh!

eaglethrost May 28, 2026

Uh oh!

kevinports Jun 1, 2026

Uh oh!

kevinports commented Jun 4, 2026

Uh oh!

eaglethrost left a comment

Uh oh!

kevinports commented Jun 5, 2026

Uh oh!

eaglethrost commented Jun 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		/** @see https://docs-v5.fontawesome.com/web/reference-icons */
		const FA_PREFIXES = new Set(['fab', 'fad', 'far']);

Conversation

kevinports commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 What does this PR do?

🧪 QA tips

📸 Screenshot or Loom

Uh oh!

kevinports May 27, 2026

Choose a reason for hiding this comment

Uh oh!

maximilianfalco May 28, 2026

Choose a reason for hiding this comment

Uh oh!

kevinports Jun 1, 2026

Choose a reason for hiding this comment

Uh oh!

maximilianfalco left a comment

Choose a reason for hiding this comment

Uh oh!

maximilianfalco May 28, 2026

Choose a reason for hiding this comment

Uh oh!

eaglethrost left a comment

Choose a reason for hiding this comment

Uh oh!

eaglethrost May 28, 2026

Choose a reason for hiding this comment

Uh oh!

kevinports Jun 1, 2026

Choose a reason for hiding this comment

Uh oh!

kevinports commented Jun 4, 2026

Uh oh!

eaglethrost left a comment

Choose a reason for hiding this comment

Uh oh!

kevinports commented Jun 5, 2026

Uh oh!

eaglethrost commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kevinports commented May 27, 2026 •

edited

Loading

eaglethrost commented Jun 9, 2026 •

edited

Loading