Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a list on how to use material-ui icons in the svg-icons folder?

I want to use the material-ui icons in the svg-icons folder I did with npm install, but the implementations of each icon on each js file have different import like the ones in the action or in the editor etc. I had to look through the js file to find how to import each icon. I want a documentation or site that specifically lets me to copy paste the import of each icon.

I was looking for **navigate next** icon from google design and found it in

import ImageNavigateNext from 'material-ui/svg-icons/image/navigate-next';
like image 224
6by3 Avatar asked Aug 02 '16 07:08

6by3


People also ask

Where can I find material UI icons?

You can also use https://material-ui.com/components/material-icons/ to search for the icon you need.

How do I add icons to material UI button?

Create an icon buttonImport the IconButton component from the Material-UI core package. import IconButton from '@material-ui/core/IconButton'; Render the icon as a child component to the IconButton . You can also move the color prop to the IconButton .


1 Answers

Pre v1

You can just look up the category and name on Icons.

Every SvgIcon will map to:

import MyIconName from 'material-ui/svg-icons/<category>/<name>';

For example if I want the account balance icon which is part of the action category I would import.

import BalanceIcon from 'material-ui/svg-icons/action/account-balance';

Notice that spaces will become dashes. So the list you want is on the link above.

v1

With the new version of material-ui the icons are in their own package material-ui-icons. Now you only have to lookup the name and PascalCase it to find the correct name. The category is no longer relevant. So:

import BalanceIcon from 'material-ui/svg-icons/action/account-balance';

Becomes:

import BalanceIcon from 'material-ui-icons/AccountBalance';
like image 116
Jeroen Wienk Avatar answered Sep 28 '22 09:09

Jeroen Wienk