Material Design Icons v2.7.94

Material Design Icons released with 100 new icons and several renames.

  • phone-locked renamed to phone-lock
  • email-secure renamed to email-lock
  • send-secure renamed to send-lock
  • book-secure renamed to book-lock
  • book-unsecure renamed to book-lock-open
  • account-settings-variant replaced with account-details
    • This was removed as we standardized on ... for settings related icons to be inline with the Material Design guidelines.
  • Various bell icons were updated to match the official updates.

Reminder we support several libraries to help developers.

  • @mdi/js All the icons for JavaScript and TypeScript developers
  • @mdi/react React component with full TypeScript support
  • @mdi/font Webfont with all glyphs
  • @mdi/angular-material For use with Angular Material.
  • @mdi/util Helper library for working with NodeJS and @mdi/svg.
  • @mdi/svg Release of all icons in individual SVG files with the sites meta data, like aliases and tags.

Note: The Angular and VueJS components are still under development.

The new site is still under development, but has been slow as summer wraps up. Prioritization on components and icon releases still comes first.

Release of @mdi/react

Today we released the first version of the @mdi/react NPM package. Hoping this helps with adoption of Material Design Icons in exisiting ReactJS projects.

npm install @mdi/react

MaterialDesign-React

import Icon from '@mdi/react'
import { mdiAccount, mdiLoading } from '@mdi/js'

const Example = (props) => (
  <div>
    <Icon path={mdiAccount}/>
    <Icon path={mdiLoading} spin/>
  </div>
)

Props

path: string - SVG path data. Usually from @mdi/js
size: number, string (1) - {size * 1.5}rem
horizontal: bool (false) - Flip Horizontal
vertical: bool (false) - Flip Vertical
rotate: number (0) - degrees 0 to 360
color: string (#000) - Ex: rgb() / rgba() / #000
spin: bool, number (false) - Ex: true = 2s, {spin}s

@mdi/js ?

The @mdi/js package contains all the icons after each release as both CommonJS for Node and a module for use with import/export. Ideal for TypeScript and ES6 developers.

What about x Framework

The team is working on VueJS and Angular 6 components that will offer similar functionality. In the future we'll hopefully get to other more niche frameworks.

PrismJS VS Code Dark Theme

This blog post is used to test the PrismJS VS Code dark theme that this blog uses.

A lot of attention to detail around JSX, JavaScript, TypeScript and HTML has been carefully crafted to match VS Code. Lot of random ugly hacky CSS is used to handle most of the common uses cases in JSX.

import * as foo from '@foo/bar'
import foo from '@foo/bar'
import { foo } from '@foo/bar'

export default class foo extends something {
  func() {
    // testing
    /* testing */
    const foo = 'bar';
    let bar = true;
    var test = { object: "test" };
    var jar = 2;
    var a = () => { return 'test'; };
    var b = function() { return 'test'; };
    var b = function foo() { return 'test'; };
    return (
      <Test foo={'test'}
          bar={true}
          test={{ object: "test" }}
          jar={2}/>
      <a href="#">Test</a>
    )
  }
}

Release of @mdi/js

Backported to v2.5.94 developers will now have access to MDI through @mdi/js for use in their projects.

We are in the process of writing first party components for each of the main frameworks with the communities help (and updating 3rd party components to use @mdi/js).

A basic example for React would look like below.

import { mdiAccount } from '@mdi/js'

function Icon(props) {
  return (
    <svg viewBox="0 0 24 24"
      style={{ width: '1.5rem' }}>
      <path d={props.path}/>
    </svg>
  )
}

function App(props) {
  return (
    <Icon path={mdiAccount}/>
  )
}

Importing only the icons you need will ensure shaking works out of the box for Webpack and Rollup.

We're in the process of working on the new website and wrapping up the release for v2.6.xx. A helper package @mdi/meta will also be releasing shortly that contains the meta.json from @mdi/svg including all the website's icon data for 3rd party apps.