Skip to content

adamlindqvist/material-symbols-react

 
 

Repository files navigation

Material Symbols React

Use Google's Material Symbols (icons) in React with ease.

NPM version Downloads npm-typescript GitHub License

Installation

# npm
npm install @nine-thirty-five/material-symbols-react

# yarn
yarn add @nine-thirty-five/material-symbols-react

# pnpm
pnpm add @nine-thirty-five/material-symbols-react

Usage

@nine-thirty-five/material-symbols-react provides three Material icon variants in both default and filled types.

Icon variants are:

  • Outlined
  • Rounded
  • Sharp

Importing

There are two ways to import an icon based on your prefered type and variant.

// Outlined variant
import { Search } from '@nine-thirty-five/material-symbols-react/outlined';
import { Home } from '@nine-thirty-five/material-symbols-react/outlined/filled';

// Rounded variant
import { Star } from '@nine-thirty-five/material-symbols-react/rounded';
import { Favorite } from '@nine-thirty-five/material-symbols-react/rounded/filled';

// Sharp variant
import { Delete } from '@nine-thirty-five/material-symbols-react/sharp';
import { Login } from '@nine-thirty-five/material-symbols-react/sharp/filled';

Component Props

Icon component support all props that a React SVG component supports.

// Sample props
<Search className="yourClassName" />
<Home style={{fill: 'red'}} />
<Star height='1rem' width='1rem' />
<Favorite height={16} width={16} />
<Delete fill='red' />
<Login viewBox='0 0 24 24' />

License

Material design icons are created by Google.

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.

About

Use Google's Material Symbols (icons) in React with ease.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 72.3%
  • JavaScript 23.3%
  • HTML 3.3%
  • Shell 1.1%