【React】Onsen UIでアイコンが表示されない時の対処法

Onsen UI を使ってアイコンボタンを設置する際に、公式サイトに載っているサンプルコードが動かなかったので、その代替方法についてまとめ。
時間があったら、ちゃんと正規の方法でも実装できるように修正したいと思います。

で、今回使ったのは、以前も紹介した Font Awesome です。
React での導入方法については、以前のブログを参照ください。

【JavaScript】ReactでFont Awesomeを利用する

Font Awesome のインストールが終わったら、あとは下記のように実装します。

import React, { Component } from 'react';
import { List, ListItem, Button, Page, Toolbar, ToolbarButton } from 'react-onsenui';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faSync } from '@fortawesome/free-solid-svg-icons';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

class ListPage extends Component {
  render() {
    return (
      <div>
        <Page renderToolbar={() =>
          <Toolbar>
            <div className="left">
              <ToolbarButton>
                <FontAwesomeIcon icon={faBars} />
              </ToolbarButton>
            </div>
            <div className="center">
              ListPage
            </div>
            <div className="right">
              <ToolbarButton>
                <FontAwesomeIcon icon={faSync} />
              </ToolbarButton>
            </div>
          </Toolbar>}>
          <List
            dataSource={this.state.result}
            renderRow={(device, idx) => (
              <ListItem modifier='longdivider'>
                {result.name}
                <Button>Connect</Button>
              </ListItem>
            )} />
          </Page>
        <p>{this.state.error}</p>
      </div>
    );
  }
}

export default ListPage;

3、4行目で FontAwesome と使いたいフォントアイコンをインポートしています。
で、実際に使っているのは 16行目と 24行目です。
<ToolbarButton> タグ内でフォントアイコンを定義しています。
で、上記を実行したところ、問題なくアイコンが表示されました！
まあ、以前も同じように書いて動いたので、むしろこれで動いてくれないと困るんですけどね。

以上、Onsen UI でアイコンが表示されない時の対処法でした。
前述しましたが、恐らく正攻法ではないと思いますので、時間を見つけて公式のサンプルコードが動くように修正したいと思います。