Skip to content
Get help on SlackWatch Sanity demo

How to add a custom icon in the Editor Modal in Sanity.io

16 replies
Last updated: Aug 23, 2021
I've created a couple of dynamic sections with the rich text editor in sanity. Is it possible to have a custom icon for each section?
Aug 20, 2021, 7:37 PM
cc:
user A
Aug 20, 2021, 7:37 PM
Are you looking for this kind of thing? There’s pretty good info in this bit of documentation: https://www.sanity.io/docs/previews-list-views#d82fd035385f
Aug 20, 2021, 7:40 PM
Kindof but I'm looking for similar Image for Rich Text editor previews and not in the list pane.
user R
Aug 20, 2021, 7:42 PM
Might be worth giving it a go. Looking at this tutorial on adding custom elements to the Block editor, the preview bit looks exactly the same: https://www.sanity.io/guides/portable-text-how-to-add-a-custom-youtube-embed-block#8d08a02d3d04 🤷
Aug 20, 2021, 7:46 PM
Nope! It won't show a preview for items in a custom editor modal.Thanks again
user R
Aug 20, 2021, 8:00 PM
Nope! It won't show a preview for items in a custom editor modal.Thanks again
user R
Aug 20, 2021, 8:00 PM
Can you post that part of your schema?
Aug 20, 2021, 8:06 PM
user A
Aug 20, 2021, 8:08 PM
Every data ie title and its contents are read dynamically and I've already shown a preview in editor.
I want to show a custom icon in Editor Modal!
Aug 20, 2021, 8:10 PM
user A
Aug 20, 2021, 8:10 PM
If you put a 
preview
on your object, you should be able to set an icon (if by that you mean to replace that folded piece of paper icon) using 
media
in the 
prepare
function, which allows you to return JSX:

preview: {
  select: {
    title: 'title'
  },
  prepare({ title }) {
    return {
      title,
      media: <>'🙌'</>
    };
  },
},
Aug 20, 2021, 8:16 PM
If you put a 
preview
on your object, you should be able to set an icon (if by that you mean to replace that folded piece of paper icon) using 
media
in the 
prepare
function, which allows you to return JSX:

preview: {
  select: {
    title: 'title'
  },
  prepare({ title }) {
    return {
      title,
      media: <>'🙌'</>
    };
  },
},
Aug 20, 2021, 8:16 PM
Hi
user A
I tried adding preview but it isn't working for me!
Am I missing out something?
Aug 22, 2021, 4:58 AM
Could you try moving the previews to be siblings of the 
fields
arrays on the objects?

{
  type: 'object',
  name: 'question',
  title: 'Question',
  fields: [
    // ...
  ],
  preview: {
    // ...
  },
}
Aug 23, 2021, 4:00 AM
Woo hoo! That worked.Thanks for your awesome support
user A
🙂
Aug 23, 2021, 1:08 PM
Glad to hear it! 👍
Aug 23, 2021, 4:28 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in