TreeViewItemIcon is a semantic container for a row's icon. Provides consistent styling and structure for displaying a node's resolved icon or a custom icon node within the TreeViewItemIcon component. When no children are supplied, defaults to the node's resolved icon.
import { TreeView, TreeViewNodes, TreeViewNode, TreeViewItemIcon, TreeViewItemLabel } from '@syncfusion/react-navigations';
import { FolderIcon } from '@syncfusion/react-icons';
const data = [
{ id: '1', label: 'Documents' },
{ id: '2', label: 'Resume.docx', icon: <FolderIcon /> }
];
const fields = { id: 'id', label: 'label', icon: 'icon' };
export default function App() {
return (
<TreeView dataSource={data} fields={fields}>
<TreeViewNodes>
{() => (
<TreeViewNode>
<TreeViewItemIcon><FolderIcon /></TreeViewItemIcon>
<TreeViewItemLabel />
</TreeViewNode>
)}
</TreeViewNodes>
</TreeView>
);
}
The following table outlines the props for the TreeViewItemIconProps:
| Name | Type | Default | Description |
|---|
| children | node | - | Specifies the child content for the component. |
| className | string | - | Specifies the root element class name. |