Add Google Fonts Icons to the project

[lucianosimoni]

Add the Google fonts into the Header of the Application

• Use react-helmet library to add it to the header of App.js
• Docs about react-helmet here

After installing the react-helmet to the project

• Add the library component to the App.js return

  <Helmet>
              <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  </Helmet>

  This will import the google icons into the project

Add the Icons to the App.css

Adding it to the css, all of the project will be able to use the icons easily

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

Create a Wiki page on how to use the element

But once all of it is setup, the google icons is ready to be used along side the Google Fonts Website