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 :
@material-ui/core/icon
: component useful for displaying font icons. see https://material-ui.com/style/icons/#font-icons@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@material-ui/core/svgicon
: component to use any svg as an icon. see https://material-ui.com/style/icons/#svg-icons
Source: stackoverflow.com
Related Query
- in Material UI Icon doesn't work as expected
- onClick event handler not work as expected when attached to SVG Icon in React
- Access custom component methods through ref doesnt work as expected
- React exact path in Route doesnt work as expected
- material ui input base auto focus doesnt work
- Change color of Select component's border and arrow icon Material UI
- How to add close icon in Material UI Dialog Header top right corner
- How can I add an icon to Material UI Select options?
- google material icons loading slowly, flicker from text to icon
- Material UI component reference does not work
- Material Autocomplete does not work with InputProps
- reactJS material UI Icon button to upload file
- Any way to render Icon based on text field name using material UI?
- Material UI Auto Complete Rotate icon on expand or collapse
- Enzyme's shallow().text() with React Native doesn't work as I expected
- How to make material ui icon clickable and redirect to url
- How to add custom `PNG` image to material ui icon
- Styling/ Changing Autocomplete close Icon in Material UI React
- Cannot get Material UI radio buttons to work with Formik
- How to change text, icon and underline color of Select in Material UI
- React Native WebView scroll behaviour doesn't work as expected
- Popover component - onExited callback doesn't work , material ui
- reactJS Material UI Font Icon set size
- Material ui: How to change DatePicker text and calendar icon color?
- display text instead of icon on mouseover - React material ui button
- How to change the style of sorting icon in Material UI table?
- How to get Material UI Icon SVG path? React Icon Picker
- Socket.IO in React app bundled with Vite doesnt work (When bundled with Webpack it does)
- How to use a custom SVG file in material ui SVG ICON
- Why doesn't MobX v6.x work as expected in React with Typescript?
More Query from same tag
- Ant Design Menu and Menu Item Customize
- Objects are not valid as a React child Error in next js
- Firestore query after adding composite index still return nothing
- How to remove the last SVG button from the site? The SVG button are only supposed to go in between each word
- Async/Await in Redux
- action passed down from connect decorator is initially undefined
- Type 'undefined' cannot be used as an index type.ts(2538)
- Why does the value of the input box turn to string after I type in a number?
- React: I have some error with edit state from reducers
- Display user input value upon submit in react
- Google Maps API - How to center marker and map
- programmatically trigger onDrop function of react dropzone
- How to animate change of colour (keyframes) forward and back on click with useState without starting animation during first loading of page?
- React jest - You should not use <Link> outside a <Router>
- Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`
- watch for prop changes with useEffect
- Content editable is writing on the wrong direction when it has an value
- Change form.item label font size in AntD
- Sort user repositories by Stars Count in Github API
- Testing a React component with Jest / Enzyme & Axios
- JS Nested Ternary with Multiple conditions
- i cant handle data and save using useState after use await
- set an environment for development and production but how to access it from other components when calling APIs in react?
- Is there a way to change Typography defaults in a component?
- Common scenario with react hooks: how to change hook dependency without causing infinite render
- pass background url as prop to styled component
- react-router-redux and redux-immutable: You cannot change <Router history>; it will be ignored
- Intercepting React Click Events
- Set button made in js to route to another page in React
- React - Error: Rendered more hooks than during the previous render