How to get Material UI Icon SVG path? React Icon Picker

2
votes

I have a react application using Material UI's Icons. The main objective is to have an Icon Picker, where a user can select a MUI Icon and that selected icon's SVG path is saved within the state.

This svg path will then be saved out to an API where it can be displayed in various places. etc.

I've searched through documentation on MUI's site regarding icons, but it's all about implementation, which I can do just fine. I've looked for an npm package, without much luck.

I did come across this package (https://github.com/DMDc0de/material-ui-icon-picker), which is essentially what I'd like the picker to be - but it outputs the icon's name for an icon component <i />. Not what I want. I need the source of the SVG path.

Any direction towards this would be super helpful.

1
reactjssvgiconsmaterial-ui

1 Answers

2
votes
  1. Go to the icon site: https://material.io/tools/icons/
  2. Click on an icon
  3. Click on "Selected icon" button (bottom left)
  4. Click on the "SVG" button to download the SVG version

Alternatively, go to the GitHub repo and download the SVGs there.