Which syntax is correct for including google material design icons?

Question

I am trying to add the google material design icon in my one of the react component.

The following is the code snippet

const socialMedia = (
    <div className="columns is-centered footer-colmns sub-footer">
      <div className="column is-one-quarter">
        
        <h1>Wir sind auf diesen Kanälen vertreten</h1>
        
        <span>
          {"Youtube Icon"},
          {/MenuIcon},
          {" | "}
        </span>
          
        
        <span>
          {"Facebook Icon"},
          {" | "}
        </span>
        
        <span>
        <span>
          {"XING Icon"},
          {" | "}
        </span>
        </span>
      </div>
      </div>
  );

Answer 1

Try installing the following package:

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

Then import the icons:

import { Facebook, YouTube } from '@material-ui/icons';

Next, replace the following line of your code

    <span>
      {"Youtube Icon"},
      {/MenuIcon},
      {" | "}
    </span>

with

    <span>
      <YouTube/>,
      ... //rest of the icons
    </span>

Replace the rest in a similar fashion

Answer 2

there is no need to write the icons in curly brasis.. just write down as a tag like

<YouTube/>
<Facebook/>
<XING/>

Good Luck..

Note: Please don;t forget to install and import material UI Icons library