Expand the description of this project (README), explaining the idea behind it and why someone should prefer it over material-design-icons.

It would be great to have sign-in, sign-out icons here.

Are there plans to add the Twitter icon?

Following Icons are inside of _codepoints.scss but they are not displayable:

• 'battery_20',
• 'battery_30',
• 'battery_50',
• 'battery_60',
• 'battery_80',
• 'battery_90',
• 'battery_charging_20',
• 'battery_charging_30',
• 'battery_charging_50',
• 'battery_charging_60',
• 'battery_charging_80',
• 'battery_charging_90',
• 'copy',
• 'cut',
• 'paste',
• 'signal_cellular_0_bar',
• 'signal_cellular_1_bar',
• 'signal_cellular_2_bar',
• 'signal_cellular_3_bar',
• 'signal_cellular_4_bar',
• 'signal_cellular_connected_no_internet_1_bar',
• 'signal_cellular_connected_no_internet_2_bar',
• 'signal_cellular_connected_no_internet_3_bar',
• 'signal_wifi_1_bar',
• 'signal_wifi_1_bar_lock',
• 'signal_wifi_2_bar',
• 'signal_wifi_2_bar_lock',
• 'signal_wifi_3_bar',
• 'signal_wifi_3_bar_lock',
• 'signal_wifi_4_bar',
• 'signal_wifi_connected_no_internet_0',
• 'signal_wifi_connected_no_internet_1',
• 'signal_wifi_connected_no_internet_2',
• 'signal_wifi_connected_no_internet_3',
• 'signal_wifi_statusbar_1_bar',
• 'signal_wifi_statusbar_2_bar',
• 'signal_wifi_statusbar_3_bar',
• 'signal_wifi_statusbar_connected_no_internet',
• 'signal_wifi_statusbar_connected_no_internet_1',
• 'signal_wifi_statusbar_connected_no_internet_2',
• 'signal_wifi_statusbar_connected_no_internet_3',
• 'signal_wifi_statusbar_not_connected',

Thanks for your work! It seems to be the only way to use material icons via npm 👍

There is a reference to

font-family: 'Material Icons';

but the font does not seem to be included in the npm package.

The usage via css is currently not working.
The icons only will be displayed if I add the following (from iconfont folder) to my own css:

@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("~material-icons/iconfont/material-icons.woff2") format("woff2"), url("~material-icons/iconfont/material-icons.woff") format("woff");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga";
}

this I have to do for each style (outlined, etc.)

is this the wanted behaviour? then it should be mentioned in the docs.

Using HTML, CSS and Javascript?

Hello, would you be interested in a PR that generates an index.d.ts file with each release? The codepoints.js script would be extended to parse the the_data/codepoints.json file and generate a set of types. Something like:

export type MaterialIconSet = [
  ...
  "ac_unit",
  "access_alarm",
  "access_alarms",
  "access_time",
  "access_time_filled",
  "accessibility",
  "accessibility_new",
  "accessible",
  "accessible_forward",
  "account_balance",
  "account_balance_wallet",
  "account_box",
  "account_circle",
  "account_tree",
  ...
];

export type MaterialIcons = IconSet[number];

This feature would allow typescript apps to type check/autocomplete the icon names:

// remove 'account_box' and you can autocomplete a different icon name
const iconName: MaterialIcons = 'account_box';

A class is not defined to modify the sizes.

this is what happens when you start typing on the wrong window :(

Hi there!

Just wanted to let you know that there is icon which I can see in the demo , but is missing in the files (I don't see it in the scss), and respectively can't be used. The icon is shortcut.

Cheers!

Hi, I'm trying to use home_repair_service but it doesn't show. Are there any plans to update the library to the latest icons?

When using webpack 5 and importing via js like so:

import "material-icons";

causes the build to fail to create icons in correct format.

I'm usign laravel 6 that work with webpack, i do this imports on app.scss:
//material-icons
$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/material-icons.scss';
@import '~material-icons/iconfont/codepoints.scss';
@import '~material-icons/iconfont/mixins.scss';
@import '~material-icons/iconfont/variables.scss';
@import '~material-icons/css/material-icons.scss';
I add more imports than you recomend.
And then i use this to put an icon in a button, just for trying:

I run: npm run dev(and i use too: npm run watch), and reload deleting cache from browser and i get this:

The material icons when i use the span tag is working well, but when i use the mixins that happens. Can you help me please?

For example, I can't find arrow_back in /css/material-icons.min.css which was in /css/material-icons.css in release (and they were there in the repo).

Somewhat related to #32. I now have a need to find the codepoint for a specific icon. Would it be possible to publish codepoints.json in addition to versions.json? I think my other option is to parse the font with fontkit, which seems a bit heavy handed.

Could you please update the missing icons. Thx!

I have this line
<i class="material-icons-outlined shopping-cart">shopping_cart</i>
i also try
<i class="material-icons shopping-cart">shopping_cart_outline</i>
(dont pay attention to the shopping cart class, just for positionning)

Thanks for help !

Hi,

Thanks for this library 👍

Only one small thing is that class="material-icons" is quite long and I would like to customize the used css class to a shorter one.

Like this:

$material-icons-css-prefix: 'mi'; // defaults to 'material-icons'

<i class="mi">pie_chart</i>
<i class="mi-outlined">pie_chart</i>
<i class="mi-round">pie_chart</i>
<i class="mi-sharp">pie_chart</i>
<i class="mi-two-tone">pie_chart</i>

Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

First:
Thanks for this project. It really helps a lot !

Issue:
I noticed that some icons are missing (login, logout, policy, push_pin, query_states and local_fire_department).

There are available in material icons font from google:
https://fonts.google.com/icons?selected=Material+Icons:login
https://fonts.google.com/icons?selected=Material+Icons:logout
https://fonts.google.com/icons?selected=Material+Icons:policy
https://fonts.google.com/icons?selected=Material+Icons:push_pin
https://fonts.google.com/icons?selected=Material+Icons:query_stats
https://fonts.google.com/icons?selected=Material+Icons:local_fire_department

Hi, thanks for this. I've just noticed the monitoring icon is missing. Would it be possible to add it?

I'm interested in creating an icon picker using this package, but I'd really like to have a list of icons available so I don't need to copy the list and keep it updated. Would it be possible to publish codepoints.json and/or versions.json to npm?

I was trying to use save_alt. It doesn't appear for me.

<i aria-hidden="true" aria-label="Save" class="material-icons">save_alt</i>

The icons are a static font size (24px), this causes problems with some frameworks like bootstrap 5 when integrating predefined sizing styles like display-1 which works with pixel points or rem and not pixels directly. There should be a setting or style sheet that overrides the size of icons to the document's default size, so each person could be free to use whatever size they want across different frameworks without resorting to manual declarations in style sheets overriding the values.

Please, remove font-size declarations from the css file or add a separated css without predefined size.

The fix for me adding new css rule in custom css file (ugly but useful):

.custom-material-icons-round {
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

Same as original but without font size and using new class name.

afaict the drag_indicator icon is missing from the fonts. this one doesn't show up in my project.

Make it compatible with flutter to be used as pub.dev dependency

I often use icon sets to look up the icons I want when developing, but it is very inconvenient, and I need to memorize the icon names every time. It would be great if you could add a click to copy directly, I think that would be very convenient.

The team at Google Fonts recently released Material Symbols, a new, much more customizable version of Material Icons.

It would be amazing if you could add support for them, by adding a second workflow looking for the latest version of Material Symbols and a separate material-symbols.css for them.

Hey,
first of all, thank you very much for this library, it has been very useful to me for quite a while!

This morning I tried upgrading to the latest 0.5.0 version and got hit by a build error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C.\path\to\my\project\node_modules\material-icons\iconfont\material-icons.css:77:262:: Can't resolve 'MaterialIconsTwoTone-Regular.ttf' in 'C.\path\to\my\project\node_modules\material-icons\iconfont

It seems like the stylesheet is trying to include all kinds of versions of the newly added fonts, but not all of them are part of the bundle. The missing files are:

• MaterialIcons-Regular.otf
• MaterialIconsTwoTone-Regular.ttf
• MaterialIconsSharp-Regular.ttf
• MaterialIconsRound-Regular.ttf
• MaterialIconsOutlined-Regular.ttf

Removing all of these results in a functioning build, but would require manually editing the source material-icons.css file. I wouldn't recommend it, I just wanted to mention it as a temporary workaround for anyone reading this.

Thank you!

The project that currently makes use of the icons has been updated to the latest version, but when trying to use the icons they are not available

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

The latest version of this is 9 months old. The google repo is only 8 months old, so some icons seem to be missing (like verified).

With the mentioning in the readme they seem to also another source: https://github.com/google/material-design-icons/tree/master/variablefont

I miss the icon no_accounts (or mi-no-accounts)

It is available in material icons font from google: https://fonts.google.com/icons?selected=Material+Icons:no_accounts

The outlined icon for label_important is filled instead of outlined

I would like to use the icons listed here https://fonts.google.com/icons?icon.set=Material+Icons, no expo react native.

I can't load control_camera because its not present in CSS