How to add Glyphicon to NavDropdown in ReactBootstrap

Question

I am trying to add a glyphicon to NavDropdownin React Bootstrap. I know that you can add it to normal Dropdown, like this, as described in the documentation.

<Dropdown id="dropdown-custom-1">
  <Dropdown.Toggle>
    <Glyphicon glyph="star" />
    Pow! Zoom!
  </Dropdown.Toggle>
  <Dropdown.Menu >
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
  </Dropdown.Menu>
</Dropdown>

What I tried:

1. Doesn't work:

    <NavDropdown eventKey={3} id="basic-nav-dropdown">
       <NavDropdown.Toggle>
       <Glyphicon glyph="star" />
       Pow! Zoom!
       </NavDropdown.Toggle>
       <MenuItem eventKey={3.1}>Action</MenuItem>
       <MenuItem eventKey={3.2}>Another action</MenuItem>
    </NavDropdown>

2. Doesn't work:

    <NavDropdown eventKey={3} title={<Glyphicon glyph="star" /> Dropdown} id="basic-nav-dropdown">
       <MenuItem eventKey={3.1}>Action</MenuItem>
       <MenuItem eventKey={3.2}>Another action</MenuItem>
    </NavDropdown>

3. Does it work, but the carriage does not match the text, and appears in a new line:

    <NavDropdown eventKey={3} title={<div><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
       <MenuItem eventKey={3.1}>Action</MenuItem>
       <MenuItem eventKey={3.2}>Another action</MenuItem>
    </NavDropdown>

Answer 1

You can try passing the header through the component <Glyphicon />as follows:

 render() {
     const navDropdownTitle = (<Glyphicon glyph="star"> Dropdown </Glyphicon>);
     return (
       <NavDropdown title={navDropdownTitle} eventKey={3} id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
       </NavDropdown>
      )
}

(Update) Or we can use your approach, but with a little fix for the div style. The font style in this case will not break.

 <NavDropdown eventKey={3} title={<div style={{display: "inline-block"}}><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
   <MenuItem eventKey={3.1}>Action</MenuItem>
   <MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>

, , text-decoration: underline, . , css:

a.dropdown-toggle {
    text-decoration: none;
}