ReactのMaterial-UIコンポーネントには大量のアイコンが用意されている。
|
1 2 3 4 5 |
import FavoriteIcon from '@material-ui/icons/Favorite'; ... render( <FavoriteIcon /> ); |
これで
が表示される。
一覧が見当たらなかったのでフォルダにある分を表示するようにしました。
一覧部分はマウスオーバーでコンポーネント名を表示して、クリックするとクリップボードにコピーされます。
気に入ったものがない場合、material iconsを使う方法もある。
使うにはまず、index.htmlに以下を追加する。
|
1 2 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
使いたいマテリアルアイコンをIconコンポーネントに入れる。
|
1 2 3 |
import Icon from '@material-ui/core/Icon'; ... <Icon>shopping_cart</Icon> |
これで
が表示される。
また、Iconコンポーネントを使わなくても表示はできる。
|
1 |
<i class="material-icons">shopping_cart</i> |