title: react - add icons to header inside component
body: <p>i am currently trying to solve a react problem.<br>
  i want to be able to add icons to a container called SalesChannels.
  here is the code to the salesChannels page: (JSX)</p>
  
  <pre><code>import React, { Component } from 'react';
  import PageContent from 'components/PageContent';
  import IBox from 'components/IBox';
  
  export default class SalesChannelsPage extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              rows: []
          }
      }
  
      render() {
          return (
              &lt;PageContent header="Salgskanaler"&gt;
                  &lt;IBox title="Salgskanaler"&gt;
  
                  &lt;/IBox&gt;
              &lt;/PageContent&gt;
          );
      }
  }
  </code></pre>
  
  <p>As you can see, i have added a component called IBox. this should be reusable
  it looks like this:  </p>
  
  <pre><code>import React, {Component} from 'react';
  import IBoxTools from './IBoxTools'
  
  export default class IBox extends Component {
      render() {
           return(
              &lt;div className="ibox"&gt;
                  &lt;div className="ibox-title"&gt;
                      {this.props.title}
  
                  //this is where the icon should be rendered in the dom
  
                  &lt;/div&gt;
                  &lt;div className="ibox-content"&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;    
          );
  
      }
  }
  </code></pre>
  
  <p>i have also created another component called IBoxTools - this contains the actual icon / "i" tag:</p>
  
  <pre><code>import React, {Component} from 'react';
  
  export default class IBoxTools extends Component {
      render() {
          let icon;
  
          if(this.props.icon) {
              icon = (
                  &lt;a title={this.props.title}&gt;
                      &lt;i onClick={() =&gt; this.iconClicked()} className={`pull-right ${this.props.icon}`}&gt;&lt;/i&gt;
                  &lt;/a&gt;
              );
          }
  
          return icon;
      }
  
      iconClicked() {
          console.log('icon clicked')
      }
  }
  </code></pre>
  
  <p>So what i am trying to do is add multible icons to the SalesChannels page, inside the IBox tag, without making the IBox component dependent on it.</p>
  
  <p>I hope you can help. Thanks!</p>