How to use google material symbols in next.js

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 (
        <Main />
        <NextScript />

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' }}>
      <div className={styles.icon}><i className="material-icons-outlined" style={{ color: 'blue', fontSize: '14px', margin: '4px' }}>
      <div className={}></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

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.

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.

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