react-将图标添加到组件内部的标题中

我目前正在尝试解决一个react问题
我希望能够将图标添加到名为SalesChannels的容器中。这是salesChannels页面的代码：（JSX）

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 (
            <PageContent header="Salgskanaler">
                <IBox title="Salgskanaler">
                </IBox>
            </PageContent>
        );
    }
}

正如您所看到的，我添加了一个名为IBox的组件。这个应该是可重复使用的它看起来像这样：

import React, {Component} from 'react';
import IBoxTools from './IBoxTools'
export default class IBox extends Component {
    render() {
         return(
            <div className="ibox">
                <div className="ibox-title">
                    {this.props.title}
                //this is where the icon should be rendered in the dom
                </div>
                <div className="ibox-content">
                    {this.props.children}
                </div>
            </div>    
        );
    }
}

我还创建了另一个名为IBoxTools的组件，它包含实际的图标/"i"标签：

import React, {Component} from 'react';
export default class IBoxTools extends Component {
    render() {
        let icon;
        if(this.props.icon) {
            icon = (
                <a title={this.props.title}>
                    <i onClick={() => this.iconClicked()} className={`pull-right ${this.props.icon}`}></i>
                </a>
            );
        }
        return icon;
    }
    iconClicked() {
        console.log('icon clicked')
    }
}

因此，我想做的是在IBox标签内的SalesChannels页面中添加多个图标，而不使IBox组件依赖于它

我希望你能帮忙。谢谢