Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Trouble changing icons in array elements, resolved with help from community.

12 replies
Last updated: Dec 21, 2022
Hello! I'm having trouble changing icons in elements of an array.
So, I have a schema type called category. I've given it a preview like this:

preview: {
        select: {
          title: 'categoryName',
          subtitle: 'descriptionShort',
          media: 'icon'
        }
      }
It works in the document list that shows all the categories.
However, I also have a list of some chosen categories in an array in a different document. There the title and the subtitle is as determined by the preview in category, but the icon is the default empty page instead of the one from category. How do I change the icon in an array preview of an element?
Dec 21, 2022, 9:52 AM
You can set an icon on the schema level (which will be a default fallback) and in the preview like this:
// on the schema level
export default defineType({
  type: 'document',
  name: 'ticket',
  title: 'Ticket',
  liveEdit: true,
  icon: () => <SupportIcon />,
  fields: [...

// in preview
  preview: {
    select: {
      title: 'title',
      alternatives: 'alternatives',
    },
    prepare({alternatives, title}) {
      const subtitle = alternatives !== undefined ? `${alternatives.map((a) => a).join(', ')}` : ''

      return {
        title,
        subtitle,
        media: <SupportIcon />
      }
    },
  },
Dec 21, 2022, 10:58 AM
import {TagIcon} from '@sanity/icons'

export default {
    name: 'category',
    type: 'document',
    title: 'Category',
    icon: TagIcon,
    fields: [
I already have an icon set in the schema and it works in the document list, just not in the reference array.
Dec 21, 2022, 11:24 AM
user J
Sorry for tagging, it's just you added a checkmark to my question when it hasn't been resolved yet.
Dec 21, 2022, 11:58 AM
in the array you need to define the preview 🙂
Dec 21, 2022, 1:51 PM
{
            name: 'featuredCategories',
            type: 'array',
            title: 'Featured Categories',
            of: [{
                type: 'reference',
                to: [
                    {type: 'category'}
                ],
                options: {
                    layout: 'tags',
                },
            }],
            preview: {
                select: {
                    title: 'categoryNameEng'
            }
        },
Adding a preview to the array does nothing. In the docs it also doesn't say that an Array has a preview field or option.

Maybe I'm misunderstanding you. There is quite a few different places I can think of to add the icon. You have the document with the array where it could be either on the objects within the array, or the array itself, or it could be in the document that is referenced either as an icon, or as a preview in the document. But I do think I have tried all of those.
Dec 21, 2022, 2:03 PM
https://www.sanity.io/docs/previews-list-views You need to define the previews in the documents referenced themselves, not the array.
Think of it that way: What are you previewing? You are previewing data from the referenced documents. Hence you need to define it there. You can have multiple doc types referenced in one array, so you need to define all previews within the given doc types.


{
            name: 'contentArray',
            title: 'Content',
            type: 'array',
            // In this array you want to display each of the items in a different way, regardless, if these are objects like this example here, or references to documents ☺️
            of: [
                { type: 'heroSection' },
                { type: 'headerSection' },
                { type: 'textSection' },
                { type: 'cardSection' },
                { type: 'accordionSection' },
                { type: 'furtherLinkSection' },
                { type: 'tabSection' },
                { type: 'cta' }
            ],
        },
Hope that helps
😊
Dec 21, 2022, 2:26 PM
So if you want to only set an icon, you can set an icon in the document schemas as detailed in this message here
Dec 21, 2022, 2:27 PM
I do also have a preview in the referenced document. And when that document is shown in a document list I get the icon, but when it is in the array I do not, but the other fields act in accordance with the preview. Let me add some screenshots to see if that makes it clearer. As seen from the screenshots the icon behaves differently in the document list and in the array of references. In this case I have a preview in the document that is referenced in the array. I changed the title here to a different field than the default to see that it changes in both the document list and in the reference array and that is the case. So both apply the preview, but the icon is only changed in one of the instances.
Dec 21, 2022, 2:46 PM
I'm just bumping this one since I got a checkmark on it without finding a solution to my problem.
Dec 21, 2022, 4:09 PM
You cannot reference icon like you are trying to. Please read my code examples. since icon is NOT a field, 
media: "icon"
will not work.You need to pass a react component to media 
media: <ICON/>
Dec 21, 2022, 4:27 PM
Ah awesome, thank you! I didn't realize I needed the prepare part from your example. Now it works.
Dec 21, 2022, 4:35 PM
The devil is always in the details right 😉
Dec 21, 2022, 9:18 PM

Sanity– build remarkable experiences at scale

Sanity is a modern 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 started for freeExplore the demo

Was this answer helpful?