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

How to get Sanity icons to appear in array preview

3 replies
Last updated: Feb 8, 2023
Hello, I am trying to get the sanity icons in my array preview. However, when I import the icons, they appear in the selection but not the preview card. What am I doing wrong?
Feb 8, 2023, 2:06 AM
Here is a sample of one of my schema in the array

import { MasterDetailIcon } from "@sanity/icons";

export default {
  name: "caseText",
  title: "Case study text",
  type: "object",
  icon: MasterDetailIcon,
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "subtitle",
      title: "Sub Title",
      type: "string",
    },
    {
      name: "bodycopy",
      title: "Body Copy",
      type: "text",
    },
  ],
  preview: {
    select: {
      title: "title",
      subtitle: "subtitle",
    },
  },
};
Feb 8, 2023, 2:09 AM
I think you need to set a value for 
media
in your preview object, otherwise it will try to use an image field from your schema object. So something like this
preview: {
  select: {
    title: "title",
    subtitle: "subtitle",
  },
  prepare: ({ title, subtitle }) => ({
    title,
    subtitle,
    media: MasterDetailIcon
  }),
},
Feb 8, 2023, 2:17 AM
Thank you, that worked.
Feb 8, 2023, 2:48 AM

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?