Skip to content

Material Design Icons

Material Design에 사용되는 아이콘 팩.

Unicode Plane

참고로 Material Design Icons (MDI)가 PUA-A 영역에 해당하는 코드를 사용한다.

in JavaScript

Material Design Icons는 Basic Multilingual Plane (BMP)영역에서 벗어나는 PUA-A에 있다.

따라서 16bit 만 처리 가능한 String.fromCharCode 함수는 사용할 수 없다.

String.fromCodePoint를 사용하면 이 문제를 해결할 수 있다.

INFORMATION

참고로 폰트 패밀리는 Material Design Icons 이다.

JavaScript SVG Path 

import { mdiAccount } from '@mdi/js'

console.log(mdiAccount); // "M...Z"

다음과 같은 SVG Path가 출력된다. 

M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z

위의 SVG Path를 출력하고 싶다면, Web typography#Inline SVG 항목 참조.

Extras

The helper CSS classes are listed below.

Size

  • mdi-18px
  • mdi-24px
  • mdi-36px
  • mdi-48px

Rotate

  • mdi-rotate-45
  • mdi-rotate-90
  • mdi-rotate-135
  • mdi-rotate-180
  • mdi-rotate-225
  • mdi-rotate-270
  • mdi-rotate-315

Flip

  • mdi-flip-h
  • mdi-flip-v

INFORMATION

We do not include the ability to use mdi-flip-* and mdi-rotate-* at the same time.

Spin

  • mdi-spin

Color

  • mdi-light
  • mdi-inactive
  • mdi-dark
  • mdi-inactive

MDI for React

Material Design Icons can be used in React with a custom component or with the one provided in this module. 

yarn add @mdi/js
yarn add @mdi/react

Usage

The example below uses the @mdi/js package which contains all the MDI icon's path data. 

import React, { Component } from 'react';
import Icon from '@mdi/react';
import { mdiAccount } from '@mdi/js';

class App extends Component {
  render() {
    return (
      <Icon path={mdiAccount}
        size={1}
        horizontal
        vertical
        rotate={90}
        color="red"/>
    );
  }
}

Stack Usage

To layer <Icons/> nest them inside of the <Stack/> component. 

import React, { Component } from 'react';
import Icon, { Stack } from '@mdi/react';
import { mdiAccount, mdiBlockHelper } from '@mdi/js';

class App extends Component {
  render() {
    return (
      <Stack color="#444">
        <Icon path={mdiAccount}/>
        <Icon path={mdiBlockHelper}
          color="red"/>
      </Stack>
    );
  }
}

See also

Favorite site