score:3

i think you've solved your own problem since i've seen you have got the icon to show in your codesandbox.

had the same problem and found out that i didn't import the material icons font family in the index.html.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons">

only with the above import will the component work.

score:6

i think there is an error in this documentation example : https://material-ui.com/demos/buttons/#buttons-with-icons-and-label

import icon from '@material-ui/core/icon';

shoud be

import sendicon from '@material-ui/icons/send';

here is a working version with this replacement : https://codesandbox.io/s/k3rjyoq32v


the module imported with this path @material-ui/core/icon is not an svg icon itself, it is the icon component documented here : https://material-ui.com/api/icon/

there are basically three ways of working with icons in material-ui :

  1. @material-ui/core/icon : component useful for displaying font icons. see https://material-ui.com/style/icons/#font-icons

  2. @material-ui/icons : package with a set of material icons converted to svg icons usable as react components. see https://material-ui.com/style/icons/#svg-material-icons

  3. @material-ui/core/svgicon : component to use any svg as an icon. see https://material-ui.com/style/icons/#svg-icons


Related Query

More Query from same tag