• Stars
    star
    328
  • Rank 128,352 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material-UI SvgIcon components for Material Design Icons.

Material Design Icons for Material-UI

Material Design Icons version Material Design Icons version

This module provides Material-UI <SvgIcon /> components for all Material Design Icons. This is pretty handy if you use React and Material-UI to build a web app and run out of icons.

While this module contains wrappers for all icons, alias names are not included. For example, the plus icon is aliased as add, but only the plus icon is exported.

Installation

npm install mdi-material-ui --save

There are different major versions of this package, each one for different Material-UI releases. Note that this project does not follow semantic versioning. If Material Design Icons removes or renames icons, it will still be a minor version bump.

Material-UI mdi-material-ui npm tag
^5.0.0 npm latest
^4.0.0 npm mui-v4
^1.0.0, ^3.0.0 npm mui-v3
0.x npm * legacy

* mdi-material-ui v4 (for Material-UI v0) is not updated anymore

Usage

Every icon is exported with its original name in PascalCase. So coffee becomes Coffee, cloud-print-outline is exported as CloudPrintOutline and so on.

The Material Design Light icons are included in the /light subdirectory.

With tree-shaking

If your environment supports tree-shaking and you are sure that it works fine in your setup, you can simply import the icons as follows:

import { Coffee, Food } from 'mdi-material-ui'
import { Camera, Settings } from 'mdi-material-ui/light'

<Coffee />
<Food />
<Camera />
<Settings />

Without tree-shaking

If your environment doesn't support tree-shaking, you should only import the icons that you actually need in order to ensure that you don't end up bundling all icons.

import Coffee from 'mdi-material-ui/Coffee'
import Food from 'mdi-material-ui/Food'
import Camera from 'mdi-material-ui/light/Camera'
import Settings from 'mdi-material-ui/light/Settings'

<Coffee />
<Food />
<Camera />
<Settings />

License

The scripts included in this repository are licensed under the MIT license. The icons are licensed under the MIT license (see Material Design Icons and the NOTICE file).

More Repositories

1

material-ui-chip-input

A chip input field using Material-UI.
JavaScript
739
star
2

material-auto-rotating-carousel

Introduce users to your app with this Material-style carousel.
JavaScript
431
star
3

material-ui-search-bar

Material design search bar
JavaScript
260
star
4

material-ui-image

Material style image with loading animation
JavaScript
214
star
5

material-ui-time-picker

A time picker for Material-UI.
JavaScript
127
star
6

material-ui-rating

Rate something with style.
JavaScript
88
star
7

material-ui-snackbar-provider

A convenient way to use material-ui's snackbars.
JavaScript
81
star
8

material-ui-password-field

A password field using Material-UI.
JavaScript
58
star
9

material-ui-fullscreen-dialog

A fullscreen dialog for Material-UI.
JavaScript
58
star
10

electron-react-material-ui

Quick boilerplate for an electron react app with material ui
JavaScript
37
star
11

material-ui-toggle-icon

An animated toggle icon for Material-UI.
JavaScript
35
star
12

crypto-trading-bot

A trading bot that does what you order him to do (use at your own risk)
TypeScript
30
star
13

material-ui-bottom-sheet

Bottom sheets slide up from the bottom of the screen to reveal more content.
JavaScript
29
star
14

codify

TypeScript
17
star
15

material-ui-feature-discovery-prompt

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.
JavaScript
17
star
16

material-ui-settings-panel

A settings component in material ui style inspired by google admin console and google inbox.
JavaScript
16
star
17

material-ui-dots

Just some animated dots for pagination.
JavaScript
14
star
18

material-ui-file-dropzone

File selection components with drag'n'drop support for Material-UI.
JavaScript
11
star
19

react-hero-animation

A small react library for hero animations.
JavaScript
8
star
20

react-props-md-table

A markdown table generator for React component props.
JavaScript
6
star
21

material-ui-share

Material design web share component
JavaScript
5
star
22

materialdesign-webfont-material-ui

FontIcon components for Material Design Icons font icons.
JavaScript
4
star
23

mctext-react

A React component to display Minecraft-formatted text.
JavaScript
4
star
24

mui-styleguidist-wrapper

A wrapper of react-styleguidist for Material-UI components.
JavaScript
3
star
25

soundcloud-searcher

Search soundcloud tracks by name. Filter by genre
JavaScript
2
star
26

module-loader

High Cohesion, Loose Coupling with ease
JavaScript
2
star
27

McTextBlock

A WPF component for rendering Minecraft formatted text.
C#
1
star