azmenak / material-ui-nested-menu-item

Drop-in replacement for MUI's MenuItem with infinitely nested menus, and open on hover
73 stars 44 forks source link

Add Icon to NestedMenuItem #29

Open garrydoherty84 opened 2 years ago

garrydoherty84 commented 2 years ago

How/Can we add an icon to the left hand side of the NestedMenuItem? I have tried the following:

<NestedMenuItem
                                            iconLeft = {<FaBeer />}
                                            label="Sub-Button 3"
                                            parentMenuOpen={!!menuPosition}
                                            onClick={handleItemClick}
                                            style={{paddingTop: 0, paddingBottom: 0, paddingLeft: 5, fontSize: "0.85rem"}}

                                          >

                                            <MenuItem onClick={handleItemClick}>Sub-Sub-Button 1</MenuItem>
                                            <MenuItem onClick={handleItemClick}>Sub-Sub-Button 2</MenuItem>
                                        </NestedMenuItem>                                    
eliaoucohen72 commented 2 years ago

image

            <NestedMenuItem
              classes={{ root: classes.root }}
              rightIcon={false}
              label={
                <>
                  <div className={classes.flex}>
                    <div className={classes.iconMenu}>
                      <img src={MoreActionsMenu} alt="" />
                    </div>
                    <FormattedMessage {...messages.moreActions} />
                  </div>
                  <img src={MoreMenu} alt="" />
                </>
              }
              parentMenuOpen={!!menuPosition}
              onMouseOver={onMoreActionsHover}>
eliaoucohen72 commented 2 years ago

take what you need