Material design icon css

Material Icons

Latest icon fonts and CSS for self-hosting material design icons.

material-icons

Latest icon fonts and CSS for self-hosting material design icons.

This package is automatically updated, so it will always have the latest icons from Google.

Installation

npm install material-icons@latest 

Note: If you are upgrading from 0.x to 1.x see the 1.0.0 release notes.

Usage

Import in JS (example: src/index.js in Create React App, src/main.js in Vue CLI):

import 'material-icons/iconfont/material-icons.css'; 

or import in CSS (example: src/styles.css in Angular CLI):

@import 'material-icons/iconfont/material-icons.css'; 

 href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet"> 

To display an icon, use one of the following:

 class="material-icons">pie_chart  class="material-icons-outlined">pie_chart  class="material-icons-round">pie_chart  class="material-icons-sharp">pie_chart  class="material-icons-two-tone">pie_chart 

Reducing Build Size

The default material-icons.css includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need filled and outlined icons, import filled.css and outlined.css instead of the default material-icons.css :

-import 'material-icons/iconfont/material-icons.css'; +import 'material-icons/iconfont/filled.css'; +import 'material-icons/iconfont/outlined.css'; 

Icons | CSS | Sass :— | :— | :— Filled | filled.css | filled.scss Outlined | outlined.css | outlined.scss Round | round.css | round.scss Sharp | sharp.css | sharp.scss Two Tone | two-tone.css | two-tone.scss

Using Sass

Import in Sass (example: src/styles.scss in Angular CLI):

@import 'material-icons/iconfont/material-icons.scss'; 

$material-icons-font-path: './' !default; $material-icons-font-size: 24px !default; $material-icons-font-display: block !default; 

If you are getting errors with webpack or Vue CLI, add this line before importing:

$material-icons-font-path: '~material-icons/iconfont/'; 

Using Angular mat-icon

To display an icon, use one of the following:

 pie_chart  fontSet="material-icons-outlined">pie_chart  fontSet="material-icons-round">pie_chart  fontSet="material-icons-sharp">pie_chart  fontSet="material-icons-two-tone">pie_chart 

Using CSS Classes

Alternatively, you may use CSS classes instead of ligatures to display icons. Learn more

Available Icons

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.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Material Design icons by Google

License

google/material-design-icons

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Material Icons / Material Symbols

These are two different official icon sets from Google, using the same underlying designs. Material Icons is the classic set, while Material Symbols was introduced in April 2022, built on variable font technology.

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

The icons are designed under the material design guidelines.

We’d love to support your icon needs! Please submit your request here on GitHub as an issue.

Please note that Google Fonts does not accept user submissions of finished icon designs! There are fairly strict guidelines for Material icons, plus Google has upstream source files from which this repo is generated. Therefore, Google does not accept pull requests for icon files (whether new icon suggestions, or fixes for existing icons). Concepts are appreciated—just don’t design SVGs and submit them via pull request.

However, users are perfectly welcome to point at outside files or images as examples—for the kind of thing they want, but they won’t just be taken “as is.” This works especially well if you have multiple examples for a single icon, to help us understand the “essence” of the idea.

For example, there is a fairly universal conceptual logo/icon for “agender,” so if you were proposing Google add an agender icon in the Material style, either mentioning that, or pointing at https://www.google.com/search?q=agender+icon would be a helpful tip.

Currently, Google does not include 3rd-party logos among the Material Symbols or Material Icons due to legal reasons. Some 3rd-party logos that were included in the past have since been removed.

Google does not currently maintain the npm package for this repo, past v3 (2016). However, user @marella is hosting the following. He tells us these are automatically updated and published using GitHub Actions. Google does NOT monitor or vet these packages.

• Only WOFF2 variable fonts and CSS for Material Symbols
• Includes outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size
• Supports Sass

• Only WOFF2, WOFF fonts and CSS
• Includes outlined, round, sharp and two-tone icons
• Supports Sass

• Only WOFF2 fonts and CSS
• Lighter version of material-icons package
• Doesn’t support older browsers such as Internet Explorer because of dropping WOFF (v1)

The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons

These classic icons are available in five distinct styles:

• Outlined
• Filled (the font version is just called Material Icons, as this is the oldest style)
• Rounded
• Sharp
• Two tone

The following directories in this repo contain specifically Material Icons (not Material Symbols) content:

What is currently not available in Material Icons?

• variable fonts
• weights other than Regular
• grades other than Regular
• a means to animate Fill transitions

These newer icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.

These icons were built/designed as variable fonts first (based on the 24 px designs from Material Icons). There are three separate Material Symbols variable fonts, which also have static icons available (but those do not have all the variations available, as that would be hundreds of styles):

• Outlined
• Rounded
• Sharp
• Note that although there is no separate Filled font, the Fill axis allows access to filled styles—in all three fonts.

Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:

• Optical Size (opsz) from 20 to 48 px. The default is 24.
• Weight from 100 (Thin) to 700 (Bold). Regular is 400.
• Grade from -50 to 200. The default is 0 (zero).
• Fill from 0 to 100. The default is 0 (zero).

The following directories in this repo contain specifically Material Symbols (not Material Icons) content:

What is currently not available in Material Symbols?

• only the 20 and 24 px versions are designed with perfect pixel-grid alignment
• the only pre-made fonts are the variable fonts
• there are no two-tone icons

Material Icons update history

• 2016 Sep 01
• Changed license in package.json.
• Added missing device symbol sprites.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Latest icon fonts and CSS for self-hosting material design icons.

License

marella/material-icons

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Latest icon fonts and CSS for self-hosting material design icons.

This package is automatically updated, so it will always have the latest icons from Google.

npm install material-icons@latest

Note: If you are upgrading from 0.x to 1.x see the 1.0.0 release notes.

Import in JS (example: src/index.js in Create React App, src/main.js in Vue CLI):

import 'material-icons/iconfont/material-icons.css';

or import in CSS (example: src/styles.css in Angular CLI):

@import 'material-icons/iconfont/material-icons.css';

link href pl-s">/path/to/material-icons/iconfont/material-icons.css" rel pl-s">stylesheet">

To display an icon, use one of the following:

span class pl-s»>material-icons«>pie_chartspan> span class pl-s»>material-icons-outlined«>pie_chartspan> span class pl-s»>material-icons-round«>pie_chartspan> span class pl-s»>material-icons-sharp«>pie_chartspan> span class pl-s»>material-icons-two-tone«>pie_chartspan>

The default material-icons.css includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need filled and outlined icons, import filled.css and outlined.css instead of the default material-icons.css :

-import 'material-icons/iconfont/material-icons.css'; +import 'material-icons/iconfont/filled.css'; +import 'material-icons/iconfont/outlined.css';

Show all

Icons	CSS	Sass
Filled	filled.css	filled.scss
Outlined	outlined.css	outlined.scss
Round	round.css	round.scss
Sharp	sharp.css	sharp.scss
Two Tone	two-tone.css	two-tone.scss

Import in Sass (example: src/styles.scss in Angular CLI):

@import 'material-icons/iconfont/material-icons.scss';

$material-icons-font-path: './' !default; $material-icons-font-size: 24px !default; $material-icons-font-display: block !default;

If you are getting errors with webpack or Vue CLI, add this line before importing:

$material-icons-font-path: '~material-icons/iconfont/';

To display an icon, use one of the following:

mat-icon>pie_chartmat-icon> mat-icon fontSet pl-s">material-icons-outlined">pie_chartmat-icon> mat-icon fontSet pl-s">material-icons-round">pie_chartmat-icon> mat-icon fontSet pl-s">material-icons-sharp">pie_chartmat-icon> mat-icon fontSet pl-s">material-icons-two-tone">pie_chartmat-icon>

Alternatively, you may use CSS classes instead of ligatures to display icons. Learn more

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

Latest icon fonts and CSS for self-hosting material design icons.

Источник