SvgIconStyle

Style svg files from a local folder.

import {SvgIconStyle} from '../../src/components';

// ----------------------------------------------------------------------

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40 }} />

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'text.secondary' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'text.disabled' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'primary.main' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'secondary.main' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'info.main' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'success.main' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'warning.main' }}
/>

<SvgIconStyle
  src="/static/icons/ic_banking.svg"
  sx={{ width: 40, height: 40, color: 'error.main' }}
/>

Iconify

import {Iconify} from '../../src/components';

// ----------------------------------------------------------------------

<Iconify icon='carbon:cube' sx={{ width: 40, height: 40 }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'text.secondary' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'text.disabled' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'primary.main' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'secondary.main' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'info.main' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'success.main' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'warning.main' }} />
<Iconify icon='carbon:cube' sx={{ width: 40, height: 40, color: 'error.main' }} />

//OR
import {Iconify} from '../../src/components';
import cubeIcon from '@iconify/icons-carbon/cube';

// ----------------------------------------------------------------------

<Iconify icon={cubeIcon} sx={{ width: 40, height: 40 }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'text.secondary' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'text.disabled' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'primary.main' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'secondary.main' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'info.main' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'success.main' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'warning.main' }} />
<Iconify icon={cubeIcon} sx={{ width: 40, height: 40, color: 'error.main' }} />