marella/material-icons

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

material-icons's Issues

Support for Material Symbols

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.

Fast copy icons element?

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.

Help with mixins, icons not showing

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?

Missing icons (login, logout, policy, push_pin, query_states, local_fire_department)

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

Need to get codepoint for a specific ligature

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.

Monitoring icon is missing

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

Automatically generated typescript types

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';

What is the point of this project?

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

Icon control_camera not found in css

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

Customize css class

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>

Google lighthouse complains about font-display property

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

No default jsDelivr CDN file set

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

A lot of icons are not displayable

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 👍

How to use Material Icon in react native with expo?

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

Outlined icon for label_important is incorrect

The outlined icon for label_important is filled instead of outlined

css-loader@6 breaks building 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.

The new icons from version 1.11.6 are not available when using

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

How to use in vanilla HTML/CSS/JS

Many icons not presented in minified CSS file in release

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).

save_alt not displaying

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>

CSS usage doesn't work

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.

How to use outlined icons

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 !

Outdated font files

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

Missing icon: shortcut

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!

ignore this please

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

Files missing in the bundle

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!

Where's the actual font file?

There is a reference to

font-family: 'Material Icons';

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

Publish codepoints/versions.json?

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?

Missing icon Twitter

Are there plans to add the Twitter icon?

no_accounts is not available

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

Does not apply sizes

A class is not defined to modify the sizes.

drag_indicator seems to be missing

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

Can I add Calculator?

Using HTML, CSS and Javascript?

Icon request: Sigh-In, Sign-Out icons

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

Autosize

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.

Update with all symbol items

Could you please update the missing icons. Thx!

Can I use it in Dart?

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

No new icons?

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?