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•10mo 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•10mo ago

<@783439443410813008> kapa.ai is still learning and improving, please let us know how it did by reacting below

fascinating-indigoOP•10mo 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•10mo 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•10mo ago

<@783439443410813008> kapa.ai is still learning and improving, please let us know how it did by reacting below