Skip to content

An expression of all material icons in React components without the need for MUI

Notifications You must be signed in to change notification settings

CocoisBuggy/react-material-icons

Repository files navigation

Google Material Icons in React

All Google material icons wrapped up into a simple componet library for React.

Why?

There is a popular and well thought out library already out there called material-icons which does more or less the same job as this library, but will cause @mui/material to be added to your project as an indirect dependency.

Installation

After installing the package, you will need the following reference added somewhere in your react html <head>.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

This should be all you need to do. If the style sheets aren't loading, you'll see the name of the icon, rather than the icon itself.

Usage

Using an icon is as simple as importing it and using it as a component.

import { Password } from "@cocobugs/react-material-icons";

<Password />;

You can pass the normal props to the component, and it'll accept all html props for <i> elements. The icons are totally unstyled by default, and are really flexible for plugging in to your own styling framework.

import { Password } from "@cocobugs/react-material-icons";

// Tailwind
<Password className="text-lg text-green-500" />;
// Other classes
<Password className="custom-class" />;
// styles
<Password style={{ color: "green", fontSize: "2rem" }} />;

About

An expression of all material icons in React components without the need for MUI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published