Skip to content
Search

Material Design Icons

lastmod 2023-05-30created 2022-03-2317 edits

An icon pack used in Material Design.

Unicode Plane

Note that Material Design Icons (MDI) uses code points in the PUA-A range.

in JavaScript

Material Design Icons are in PUA-A, which lies outside the Basic Multilingual Plane (BMP).

Therefore the String.fromCharCode function, which can only handle 16 bits, cannot be used.

Using String.fromCodePoint solves this problem.

INFORMATION

Note that the font family is Material Design Icons.

JavaScript SVG Path 

import { mdiAccount } from '@mdi/js'

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

It prints an SVG Path like the following. 

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

To render the SVG Path above, see 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

author Zer0 sitemap