Security News
Opengrep Emerges as Open Source Alternative Amid Semgrep Licensing Controversy
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
@igniteui/material-icons-extended
Advanced tools
A subset of Material Icons that extend the official Material Design Icons by Google.
This is an unofficial subset of icons that extends the official Material Design Icon set provided by Google.
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.
This package includes 220+ icons distributed in 5 categories:
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.
npm install @igniteui/material-icons-extended
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 yout component template:
<igx-icon fontSet="imx-icons" name="github"></igx-icon>
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" }} />
);
The package includes an SVG sprite that bundles all icons into a single file. Alongside this sprite, we include CSS, Sass, and Less files that associate each icon in the sprite with a CSS class. To consume the icons in this way, you must include one of the aforementioned style files in your project.
For instance, with Sass, in your main Sass file import:
@import "~@igniteui/material-icons-extended/sprites/styles/sprite";
.imx-icon {
width: 24px;
height: 24px;
background-size: auto 100%;
}
Then in your HTML file:
<i class="imx-icon imx-github"></i>
We also include a Less and Sass mixin called igx-icon
. This mixins includes the background-image
and background-position
.
The package also includes an SVG sprite with all icons listed as <symbol>
elements. This sprite can be imported from @igniteui/material-icons-extended/sprites/symbol/svg/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="svg/sprite.symbol.svg#github"></use>
</svg>
In your CSS:
.imx-github {
width: 24px;
height: 24px;
fill: royalblue;
}
All SVG icons can be found in @igniteui/material-icons-extended/svgs
;
Feel free to use the issue tracker to request new icons.
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 accesibility. SVG should be well supported across all modern browsers.
FAQs
A subset of Material Icons that extend the official Material Design Icons by Google.
The npm package @igniteui/material-icons-extended receives a total of 2,933 weekly downloads. As such, @igniteui/material-icons-extended popularity was classified as popular.
We found that @igniteui/material-icons-extended demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.