npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@material-icons/svg

v1.0.33

Published

Material Design icons by Google, updated.

Downloads

34,177

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

cyberaliencyberalien

Keywords

iconsmaterialmaterial-designgoogle

Readme

Material Design Icons

Material Design Icons is the official icon set from Google. The icons are designed under the material design guidelines.

Updated set

This is an updated version of icons, which includes all icons available at material.io.

You can find an older version of this icon set in google/material-design-icons repository.

Because the official repository is no longer maintained, I have decided to make an alternative repository with the latest icons.

Available icons

Version 3 that is available in the official icons repository only includes 1 variation of each icon.

This repository includes several variations for each icon:

  • baseline
  • sharp
  • outline
  • round
  • two-tone

This repository includes only icons in SVG format. Other available formats are in different repositories:

If you need another format, please open an issue on this repository and specify what format, size and colour you need.

Getting started

This readme explains how to use updated icons set in your projects.

This repository does not use the same build process as the official Google MDI repository and has a different folder structure.

Using SVG

SVG files are available in the directory "svg", followed by icon name. Each directory contains up to 5 SVG files, one for each icon variation.

All icons are 24x24, cleaned up and optimized. If you need a different size, change width and height attributes in the icon. SVG files are scalable, duplicating them for different sizes is pointless.

To get SVG files, you can either clone GitHub repository or install @material-icons/svg NPM package.

Web font

Web font is is available in material-icons-font repository.

Avoid using web font!

Icon fonts are easy to use, but they are bad, very bad. They were a good idea many years ago when browsers had poor support for SVG, but in modern world avoid icon fonts like a plague. Why?

  • Icon fonts are ugly. When browser renders icon font glyph, it uses different algorythm than when rendering images. This results in blurry edges, bad alignment, it is especially bad when using Windows.
  • Fonts are for displaying text. If you want to display an image, use image.
  • Icon fonts contain lots of icons you do not use. Why load 5000 icons to display 5? It is a waste of bandwidth for visitors. It causes website to load slower, which also affects SEO.

So what is the alternative? Use SVG!

Iconify

All icons are available with Iconify.

What is Iconify?

Iconify project makes it easy to add SVG icons to websites and offers over 100,000 icons to choose from.

Iconify project uses a new innovative approach to loading icons. Unlike fonts and SVG frameworks, Iconify only loads icons that are used on the current page. That means if you display 20 icons on page, visitor will load data only for those 20 icons, no extra stuff.

You are no longer limited to this icon set, but can choose various icons from other icon sets that follow Material Design guidelines:

and many other icon sets.

How to use this icon set with Iconify?

Browse this icon set on Iconify website, click any icon (for example, content-paste) and scroll down to see code.

Iconify offers multiple ways to use icons:

Linking to SVG

This repository is available on github.io. You can link to any SVG file like this:

https://material-icons.github.io/material-icons/svg/{name}/{family}.svg

where {name} is icon name, {family} is icon variation.

Branches

There are 2 branches of this repository: "original" and "master".

The "original" branch includes only icons from material.io with some bug fixes.

The "master" branch includes few custom icons as well as fixed icons that were slightly modified (such as "outline" icon being changed to have the outline).

Icon categories/tags

Icon categories, tags and version numbers are available in data.json

The format is similar to metadata Google provides for the latest icons.

CLA

If you want to add icons to the master branch, you need to sign Google's Contributor License Agreement. Why Google's CLA? Maybe one day these icons will be merged into the official repository.

See CONTRIBUTING.md

Custom icons

All contributed icons must be 24x24, must have all 5 variations and must match material design guidelines.

If a contributed icon does not fit into one of the existing categories, such as "AV", "Editor", a new category will have to be created. For a new category to be added there needs to be large enough number of icons that fit that category.

See https://github.com/material-icons/build

License

(copied from Google's repository)

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. The only thing we ask is that you not re-sell these icons.