Material-UIのアイコンの色の変え方

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

material-ui.com

color属性

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

  • ’inherit'
  • 'primary'
  • 'secondary'
  • 'action'
  • 'error'
  • 'disabled’

のうち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属性

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

使用例

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

// 略

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

f:id:yucatio:20181123221202p:plain

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

バージョン

  • react: 16.5.0
  • @material-ui/core: 3.4.0
  • @material-ui/icons: 3.0.1