How to use icons in material-ui v.1.3?

Question

I'm confused about how to use icons in the current version of material-ui.

According to the material-ui docs on icons, under SVG Material icons:

We provide a separate NPM package, @material-ui/icons, that includes the 1,000+ official Material icons converted to SvgIcon components.

(...)

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:

• delete is exposed as @material-ui/icons/Delete
• delete forever is exposed as @material-ui/icons/DeleteForever

An example they show is:

// Import icon
import DeleteIcon from '@material-ui/icons/Delete';

// ...

// Use icon in react somewhere
render() { return (
    <DeleteIcon />
)}

This works for many icons, but not for the file_copy-icon.

However, I can get it work with:

<i className="material-icons">file_copy</i>

What is the expected approach to make this work?

I have, with npm install --save, installed @material-ui/icons and material-design-icons. (Initially only the first, but after not getting all icons to work I tried with the second too)

I have also included the <link />-tags from material-ui installation guide

However, I import with import FileCopy from '@material-ui/icons/FileCopy';

Answer 1

It's fairly simple once you've installed an icon:

import IconName from '@material-ui/icons/{icon-name-here}';

<IconName/>

As you may have noticed there are quite a few icons missing from inside the @material-ui/icons folder, though if you navigate to the svg files on material.io you can choose to download the svg icon which you can use normally in the same convention or you can do what they do inside Material Icons package using SvgIcon and pasting the svg code taken from the material.io website.

<SvgIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <circle cx="17" cy="4.54" r="2"/>
    <path d="M14 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C17.42 8.5 16.44 7 14.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L7.22 10l1.92.53L9.79 9H12l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H17v5h2v-5.5c0-1.1-.9-2-2-2z"/>
    <path fill="none" d="M0 0h24v24H0z"/>
</svg>
</SvgIcon>

This can then be exported as a component so it's reusable. The above would work for your copy Icon you wish to use.

Answer 2

You can discover the material-ui names of the icons by browsing node_modules/@material-ui/icons: sometimes they are slightly different than the ones on the Google material design site!

In this case, the file_copy icon from the Google site is named "ContentCopy" in material-ui:

 import ContentCopy from '@material-ui/icons/ContentCopy';