ReactのuseEffectを使ってAPIからデータを取得して直ぐに参照しようとすると、値が取得されておらずにnullになっていることがあります。 その原因と対処方法について記載します。 useEf…
ReactのUIフレームワーク「MUI」では、アイコンをコンポーネントで指定します。
<InboxIcon />
DBから取得したデータを元にメニューを作ったりアイコンを表示するにはコンポーネントでは動的に変更できません。
そこで文字列で指定する方法を記載します。
Icon fontを追加
index.html等のルートのheadタグ内でIconFontを読み込みます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
公式ドキュメント
<https://mui.com/components/icons/#icon-font-icons>
アイコンコンポーネント内で文字列で指定
Iconコンポーネントをimportした上で使用したいアイコン名(star)を文字列を指定します。
import Icon from '@mui/material/Icon'; <Icon>star</Icon>;
公式ドキュメント
<https://mui.com/components/icons/#icon-font-icons>
コメントを書く