Office UI Fabric のちょっとしたハマりどころの共有です。

Office UI Fabric で、チェックボックスのチェックマークとかプルダウンの下向き括弧とかのアイコンが表示されなくてなんでかなーと思ったら、initializeIcons() を呼ぶ必要がありました。

チェックしても色がつくだけでチェックマークが表示されない。

ここに initizelizeIcons() を呼ぶようにと書いてました。

コードサンプル

"use strict";

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { initializeIcons } from '@uifabric/icons';

initializeIcons();

class MyPage extends React.Component {
  render() {
    return (
      <div style={{width: '200px'}}>
        <Fabric>
          <Dropdown
              defaultSelectedKey='A'
              options={
                  [
                      { key: 'A', text: '田中' },
                      { key: 'B', text: '山田' },
                  ]
              }
              disabled={false}
          />
          <Checkbox
            label='checkbox'
            ariaDescribedBy={'descriptionID'}
          />
        </Fabric>
      </div>
    );
  }
}

ReactDOM.render(<MyPage />, document.getElementById("app"));

表示されました。