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

@speciosa/material-icons

v4.0.0

Published

Material icons in SVG form for JavaScript projects

Downloads

2

Readme

Material Icons

A package providing material SVG icons in tree-shakable Typescript.

Package Contents

TypeScript

The primary exports are all direct TypeScript files. No compilation to JavaScript is done for the package. This is intended to be compiled by the consuming application in order to minimize the complexity of distribution and number of steps in between source and production code.

Icons

The package exports multiple points for icons. Each provides a style of the icons as individual exports. As well as an interface for the definition of the icons. For example, import the two-tone search icon with the following: import {search} from '@garbee/material-icons/icons/two-tone'

By leveraging these exports you get a tree-shakable import. Meaning your application (given a proper build tool) will only send the required icon data to users and not the entire library.

  • filled
  • outlined
  • round
  • sharp
  • two-tone
Model Exports

A type is exported that is a list of all valid strings defined as icon names. For two tone this is MaterialTwoTone for example. Patterned to all the others, MaterialFilled for example of filled.

An interface is exported that defines the structure of the exported icons. MaterialTwoToneInterface for example with two toned. data is the actual SVG content of each icon. name is the string to identify the icon by.

The model data is useful for example when defining icons in an Angular application's icon registry (for Material.) It allows you to define the SVGs to the identifier from the source. Then you can build a subset type to use throughout your application to make sure all strings asked for are valid registered icons.

Default Export

The following exports are from the default @garbee/material-icons export. In general, DO NOT use this export for your application. This is meant as a quick collection to build up things like visual search tools. It is more difficult to tree-shake unused bits down. Prefer using the other direct exports.

  • filledIcons
  • outlinedIcons
  • roundIcons
  • sharpIcons
  • twoToneIcons

SVG

The "svg" folder provides all 24px SVGs from the upstream material design icons. They are organized by the upstream grouping with files named after the folder the SVGs resided in.

These are not exported through NPM. They exist more for direct reference by other tooling, such as svg-to-ts, in case a use-case of an organization or project demands another route.

Known inconsistency

Missing Icons

Some of the styles do not have all the icons available. This is because they are missing in the upstream library in the different styles. So, not every style has every icon. Before filing an issue about something missing in a style, please verify it exists upstream.

Name Changes

There are a few cases where things needed to be renamed. This is because of two distinct reasons. First, some icons have names of reserved words in JavaScript/TypeScript. For these cases, "Icon" was appended to the name. These instances are class, delete, try, public.

Second, some icons had names that started with a number. This is not allowed in JavaScript to be a variable name. For these cases, the numbers were replaced with their text equivalent. For example, 360 became three_hundred_sixty. For a comprehensive list, you can check the bin/gather-icons.mjs file contents and look in the renameMap content.