How to use google material symbols in next.js

JavaScript
1

Hello everyone, I want to write a toggle button for light and darkmode. I tried to implement material symbols from google for getting a sun and a moon. React-icons have a background, so they are not to center very well. I done now the following: In my src directory I created a pages folder and in there a _ document.tsx with the following code:

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'

const MyDocument = () => {
  return (
    <Html>
      <Head>
      <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=optional"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const initialProps = await Document.getInitialProps(ctx)
  return initialProps
}

export default MyDocument

In my DarkMode file I have this code:

import React from 'react'
import styles from './darkmode.module.css'

const Darkmode = () => {
  return (
    <div className={styles.container}>
      <div className={styles.icon}><i className="material-icons-outlined" style={{ color: 'blue', fontSize: '14px', margin: '4px' }}>
          mode_night
        </i></div>
      <div className={styles.icon}><i className="material-icons-outlined" style={{ color: 'blue', fontSize: '14px', margin: '4px' }}>
          light_mode
        </i></div>
      <div className={styles.circle}></div>
    </div>
  )
}

export default Darkmode

But there is only the text displayed (e.g. “light_mode”). No icons.
Does someone have experience with this?
Thanks for your help.
Best Roman

2

Sounds like you are using the App router. If so there are probably better options as they are not part of next/font/google

If all you need are the two icons the feather icons look very similar to me.

3

Thanks for your response, I installed material symbols instead of using the cdn, so the error has gone and all is working now like expected.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.