Next.js Discord

Discord Forum

Weird things happening with google material symbols

Unanswered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
at the "Absence" tab its showing it weirdly, altough its set properly.
heres the NavItem:
export default function NavItem({ href, children, className, selected, icon }: NavItemProps) {
  return (
    <div className={"flex items-center"}>
      <Link href={href} className={`${selected ? "border-r-sky-500 border-r-2" : ""} ${className} py-4 text-md flex gap-2 pl-2 text-white w-full`}>
        <span className={'material-icons'}>{icon}</span>
        {children}
      </Link>
    </div>
  );
}

4 Replies

Saltwater CrocodileOP
it should be this symbol
Netherland Dwarf
@Saltwater Crocodile what library did you use for material symbols?
Can you share the setup?
I've attempted to use material-symbols, to no avail.
I tried to import to a global css file:
css 
@import 'material-symbols/index.css';

And nothing changed, I just see the text.
I've also imported it in my pages/_app.js as
js 
import 'material-symbols';

Also faced with just text
Saltwater CrocodileOP
Honestly i got no idea, its been 7 months since i was doijg that project lol
How do you even find this thread