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

@igniteui/material-icons-extended

v3.1.0

Published

A subset of Material Icons that extend the official Material Design Icons by Google.

Downloads

25,235

Readme

Material Icons Extended by Infragistics

npm version

This is an unofficial subset of icons that extends the official Material Design Icon set provided by Google.

Purpose

We felt the Material Design Icon set is too limited and we wanted to extend it by designing additional icons that will fit well within the Material Design language.

Scope

This package includes 260+ icons distributed in 7 categories:

  • Content
  • Editor
  • Finance
  • Health
  • Logos
  • Programming
  • Social Media

We will be adding more icons and we will try to make the icon set available to as many platforms as possible. Right now we only provide SVG files/sprites so you can use them as you see fit. In addition to the SVG files, we've exported the icons as JavaScript objects so you can import and use them in your Angular/React/Vue app.

The initial target for this set is to work with our Ignite UI for Angular UI framework by utilizing the igx-icon component and the Ignite UI for Angular Icon Service.

Installation

npm install @igniteui/material-icons-extended

Usage

With Ignite UI for Angular

In your component:

import { Component, OnInit } from '@angular/core';
import { IgxIconService } from 'igniteui-angular';
import { github } from '@igniteui/material-icons-extended';
// ...
export class SampleComponent implements OnInit {
  constructor(private iconService: IgxIconService) {}

  ngOnInit(): void {
    // Register a single icon
    this.iconService.addSvgIconFromText(github.name, github.value, 'imx-icons');
  }
}

Or to register multiple icons/categories:

//...
import { github, health, programming } from '@igniteui/material-icons-extended';

export class SampleComponent implements OnInit {
  //...
  addIcons() {
    for (let icon of [...health, ...programming, github]) {
      this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
    }
  }

  ngOnInit(): void {
    this.addIcons();
  }
}

In your component template:

<igx-icon family="imx-icons" name="github"></igx-icon>

In a React App

First, make sure there's a way to use inline SVGs in your application. One package that does the job is svg-inline-react.

npm install svg-inline-react
import InlineSVG from 'svg-inline-react';
import { github } from '@igniteui/material-icons-extended';

const App = () => (
  <InlineSVG src={github.value} style={{ width: '24px', height: '24px' }} />
);

With SVG sprites

CSS Sprite Maps

We include CSS that associate each icon with a CSS class. This file can be quite large and you may not use all icons included in it. If you want to cherry-pick only the icons that will ever be used in your project, we include Sass, Less, and Stylus mixins that allow you to only add one icon at a time to the compiled CSS.

To use the CSS classes, import the main the CSS sprite file in your app (verify the path to the stylesheet based on your project structure):

<link
  href="../node_modules/@igniteui/material-icons-extended/styles/sprite.css"
  rel="stylesheet"
/>

Then you can simply use any of the icons in the following manner:

Include the GitHub icon.

<i class="imx-icon imx-github"></i>

To take advantage of the included mixins, import the corresponding sprite.(scss|less|styl) file.

With Sass, in your main Sass file import:

@use '@igniteui/material-icons-extended/styles/sprite.scss' as *;

.github-icon {
  @include imx-icon('github');
}

With Less:

@import '@igniteui/material-icons-extended/styles/sprite.less';

.github-icon {
  .imx-icon('github');
}

With Stylus:

@import '@igniteui/material-icons-extended/styles/sprite.styl'

.github-icon
    imx-icon('github')

Then in an HTML file:

<i class="github-icon"></i>

Symbols

The package also includes an SVG sprite with all icons listed as <symbol> elements. This sprite can be imported from @igniteui/material-icons-extended/assets/sprite.symbol.svg; Once you add the image to your application, you can use the encapsulated symbols like this:

In your HTML:

<svg class="imx-github">
  <use xlink:href="sprite.symbol.svg#imx-github"></use>
</svg>

In your CSS:

.imx-github {
  fill: royalblue;
}

Standalone SVG images:

All SVG icons can be found in @igniteui/material-icons-extended/assets/svgs;

Requests

Feel free to use the issue tracker to request new icons.

Where is the web font?

After some internal discussions and research, we've decided not to include a web font. There are various reasons for this decision, the main one being accessibility. SVG should be well supported across all modern browsers.