ratty-blush
ratty-blush4mo ago

using material icon for a resource type

How do i pass a mui material icon as the icon when defining meta data for a resource type?
5 Replies
kapa.ai
kapa.ai4mo ago
Hi @oshiri3676. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the meta data for a resource type, you can pass a Material UI icon as the icon property. Here's how you can do it:
<Refine
resources={[
{
/* ... */
meta: { icon: <YourMaterialIcon /> },
},
]}
/>
<Refine
resources={[
{
/* ... */
meta: { icon: <YourMaterialIcon /> },
},
]}
/>
Replace YourMaterialIcon with the Material UI icon you want to use. For more information, refer to the Refine component documentation (https://refine.dev/docs/core/refine-component#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@783439443410813008> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush
ratty-blush4mo ago
@kapa.ai - My material icon appears to be an OverrideableComponent<SvgIconTypeMap> which is not compatible with what the icon metadata is expecting.
kapa.ai
kapa.ai4mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The icon property in the meta object of a resource expects a ReactNode. If you're using Material UI icons, you should import the icon and use it directly as a component. Here's an example:
import Camera from '@mui/icons-material/Camera';

<Refine
resources={{[
{{
/* ... */
meta: {{ icon: <Camera /> }},
}},
]}}
/>
import Camera from '@mui/icons-material/Camera';

<Refine
resources={{[
{{
/* ... */
meta: {{ icon: <Camera /> }},
}},
]}}
/>
In this example, Camera is a Material UI icon used as the icon for a resource. If you're seeing a type error, it might be due to a mismatch between the expected and actual types. Make sure you're using the icon as a React component as shown in the example. For more information, refer to the Refine component documentation (https://refine.dev/docs/core/refine-component#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@783439443410813008> kapa.ai is still learning and improving, please let us know how it did by reacting below