🪶 @slimr/mdi-paths

Material Design Icon paths for any TS/JS project, packaged as single files default export = path.

Compared to Iconify

• Has all of the mdi aliases
• Uses Lazy ESM Imports instead of fetching from CDN/internet
• Is smaller bundle impact - icon files are smaller, React component smaller

Features

• Lazy ESM Imports instead of fetching from CDN/internet
• Each icon is a seperate Javascript module, named to match the name in https://materialdesignicons.com, so easy to find
• For React fans, you can use LazyIconSvg or IconSvg from @slimr/mdi-paths/react.

Context

@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!

Installation

npm install @slimr/mdi-paths

Usage

Just search for an icon on materialdesignicons.com and look for its name.

The name translates to PascalCase in @slimr/mdi-paths.

Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

For React, I recommend you use the bundled react components, LazyIconSvg and IconSvg.

Example with LazyIconSvg:

// icon.tsx
import {LazyIconSvg, LazyIconSvgProps} from '@slimr/mdi-paths/react'

const icons = {
  home: () => import('@slimr/mdi-paths/Home'),
}

type IconKeys = keyof typeof icons
type IconProps = Omit<LazyIconSvgProps, 'name' | 'svgPathImport'> & {name: IconKeys}

export function Icon({name, ...props}: IconProps) {
  return <LazyIconSvg pathImporter={icons[name]} {...props} />
}

Dependencies, References & Inspirations

• mdi-react - The generator in this package was adapted from that one (Thanks!). This package achieves similar things but does so with much less bandwidth penalty per icon.
• materialdesignicons.com - Where to browse icons
• @mdi/js - Very similar to this lib, but puts all the paths in one file
• @mdi/svg - Where this lib gets the icons from