icon library

icon library support, such that i can specify icon in css file using content property @kapa.ai ??

2 Replies

kapa.ai•13mo ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine uses Ant Design System, which provides a collection of free icons that can be used to build interactive user interfaces. However, these icons are provided separately from the base package and need to be installed separately. Fortunately, Refine comes bundled with both the base package and the icon package of Ant Design, so you don't need to install them separately. To use an icon, you append the icon name to the <Icons> component and pass it to the icon prop on the desired component. For example:

<Button  
 danger  
 onClick={() => remove(field.name)}  
 style={{ position: "absolute", top: "47px" }}  
 icon={<Icons.DeleteOutlined />}  
/>

<Button  
 danger  
 onClick={() => remove(field.name)}  
 style={{ position: "absolute", top: "47px" }}  
 icon={<Icons.DeleteOutlined />}  
/>

You can find the list of icon names on Ant Design's official documentation (https://ant.design/components/icon/). However, based on the information provided, it doesn't seem like you can specify an icon in a CSS file using the content property. The icons are used as React components rather than CSS content. For more detailed information, you can refer to the Refine documentation (https://refine.dev/docs) and Refine blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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