Get help on Discord

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?
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",
    },
  },
};
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
  }),
},
Thank you, that worked.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?