Material-UIのアイコンの色の変え方 - yucatio@システムエンジニア

Material-UI公式ページにSVGアイコンの色の変え方が載っています。

テーマカラーの色を使用する場合には、color属性を使用します。

のうち1つを指定することで色を変えられます。デフォルトは’inherit’です。

デフォルトの色を使用する↓

import { Done } from '@material-ui/icons'

// 略

<Done />

f:id:yucatio:20181123221136p:plain

<Done>は、オレンジ色の枠で囲った中の左側で、チェックのマークです。 ListItemIconのデフォルトの色になっています。

secondaryの色を使用する↓

import { Done } from '@material-ui/icons'

// 略

<Done color='secondary' />

f:id:yucatio:20181123221149p:plain

チェックマークが青色(secondaryの色)になりました。

テーマ以外の色を使用する場合にはnativeColor属性を使用します。

import green from '@material-ui/core/colors/green'
import { Done } from '@material-ui/icons'

// 略

<Done nativeColor={green[500]} />

f:id:yucatio:20181123221202p:plain

チェックマークが緑色になりました。チェックマークといえば緑色ですね。