Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJs: Cannot find Plus square icon for Material TreeView expand icon

I am struggling for something that could be pretty straight forward and something that should have been the requirement of many, and I am still not finding any help on internet for that

I am using material TreeView in my react application

import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ExpandMoreIcon from "@mui/icons-material/ExpandMoreOutlined";

<TreeView
    aria-label="file system navigator"
    defaultCollapseIcon={<ExpandMoreIcon />}
    defaultExpandIcon={<ChevronRightIcon />}
    sx={{
        height: 240,
        flexGrow: 1,
        maxWidth: 400,
        overflowY: "auto",
        marginTop: "0.6rem",
    }}
>

Currenlty ExpandMoreIcon and ChevronRightIcon is on use and so the tree looks like this

enter image description here

But I want to change the expand and collapse icons to match this design

enter image description here

I thought there would already be the expand/collapse icons available for this design because it is a very common style for tree structure, but opposite to my thought I could not find anything related to that all over the internet

I searched here https://materialui.co/icons, but there is no icon mathing that plus inside a square

I searched here also, https://v4.mui.com/components/material-icons/

I could not find any icon here also @mui/icons-material/... when I try the intellisence

Any help would be appreciable!

Tags:

2

Answers


  1. 0

    Mui does have a plus inside a Box icon. Check this.

    Login or Signup to reply.
  2. 0 
    import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox";
import AddBoxIcon from "@mui/icons-material/AddBox";

<TreeView
        aria-label="file system navigator"
        defaultCollapseIcon={<IndeterminateCheckBoxIcon />}
        defaultExpandIcon={<AddBoxIcon />}
        sx={{
          height: 240,
          flexGrow: 1,
          maxWidth: 400,
          overflowY: "auto",
          marginTop: "0.6rem",
        }}
      >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search