React bootstrap open-iconic showing a 'T' symbol instead of the relevant icon

Question

I installed bootstrap and react-open-iconic but I cannot get it working.

In the code the following is used:

if (sortColumn.order === "asc")
  return <TextIcon className="oi sort-ascending" />;
return <TextIcon className="oi sort-descending" />;

In the browser under developer tools - react I can see this:

And in the user interface this shows up:

The green frame was added to highlight was is shown for the text icon. It does not show the expected sort icon. There are no errors or warnings. Does anyone know how to use ?

Answer 1

Couldn't find many useful help for react-open-iconic; but you can use open-iconic

relevant js:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :) 
        <span className="oi oi-person"> </span> 
        <span className="oi oi-sort-ascending"> </span> 
        <span className="oi oi-sort-descending"> </span> 

        </p>
      </div>
    );
  }
}

working stackblitz here

Answer 2

I know it's a bit too late, but...
It is because you use it in a wrong way.

import {TextIcon} from 'react-open-iconic-svg';

means that you import only that icon. For compass icon you should import

import {CompassIcon} from 'react-open-iconic-svg';

And to use it:

 <Button>
      <CompassIcon />
 </Button>

For me it's not natural. Now I'm searching a way to use ope-iconic icons by class tag name.