Are the new themes of icons available on Google Fonts? #773
Comments
|
Interrested too ! |
|
Please this! With the introduction of themes themes are now required in order to use the outlined version of several important icons, such as |
|
Maybe with (BEM) modifiers: <i class="material-icons">dashboard</i>
<i class="material-icons material-icons--outline">dashboard</i> |
|
@ahlechandre Looks good! For the CSS from google fonts, it shouldn't be too hard. Just like: /* Default from https://fonts.googleapis.com/css?family=Material+Icons */
.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-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* Added */
.material-icons.material-icons--outline {
font-family: 'Material Icons Outline';
}Shouldn't be a complex change, would just need to serve multiple fonts. |
|
+1 |
3 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1 |
4 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
Most of you probably know this, but you can actually access a couple of icons in the outlined theme. To use them with web-fonts you simply use: instead of: To find whether or not an icon is available in the outlined theme simply search the github repo for icons with _outline_24px.svg in their file name. It's not a lot, but at least it's something. Brgds |
|
How about the rounded theme? Anybody managed to make it work? Tried @smileytechguy's approach, didn't worked. |
|
+1 |
1 similar comment
|
+1 |
|
@fc-janharold My "approach" was simply a suggestion as to how the team at Google could serve these icons without breaking backwards compatibility or making things awkward. It hasn't been implemented (and may not ever be) |
|
+1 |
3 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1, subbed. Outlines look like a fantastic addition |
|
Oh, I thought it's already working. @smileytechguy, thanks for the clarification. |
|
+1 |
|
High Josh, great news! I think many people here (and outside) are waiting for this, so great to hear that you're working on this. So keep up the great work!, we'll wait for this to happen! :) |
|
Sorry, holding my breath anyway. This is somewhat frustrating :( |
|
No sure why this request has turned out to be too complex to handle. This would allow taking existing icons into use while the team has time to fill missing gaps. |
This is just a hack, not an efficient way of using it. The solution is simply addind background-image, that we can do in general css, so no need to import such large css in our project. Just get css & png images of the icons from these files and use it. |
|
Definitely not an ideal solution, since it uses png instead of svg. At this point it might be a good idea to simply download all the csv icons, pop them into Icomoon and use that. |
|
Got tired of this issue and just fixed the font myself with some help around the forum. you can specify each style via ligatures and loading the font. Can find errthang here: https://peter.ng/material-icons
|
|
Hi Peter, thanks for sharing, very interesting :) |
|
Doing god's work Google didn't do, thank you! |
I'm not sure if fonts have a capability for handling multicolor? But if you have a reference i'm sure we could make that happen. Another thought would be to split out a material_multi_fg and material_multi_bg and make someone specify the two fonts overlayed |
|
Hi Peter, |
|
For use with Angular Material (7+) you could use https://www.npmjs.com/package/ts-material-icons-svg. |
|
Hi guys! I do this: https://github.com/cguilhermef/material-icons-outline Just using Icomoon, uploading all of the svg icons, some configuration and... well, now you have the outlined version. |
(See #773 (comment)) It appears that the link you added actually works (EDIT: as in it shows a font declaration), After a few minutes of manually checking the links for the other Material icon variants, they all work I also have created a Codepen confirming that the icons are rendering correctly. |
|
@Chan4077 that is wonderful and very helpful, thanks! However, I cannot color the outlined fonts, or any other versions! It is always black. I edited your Codepen to show my example, note how only the baseline is red: Anyone knows why? or have a workaround using the official https://fonts.googleapis.com/css?family=Material+Icons+Outlined ? Thanks! |
|
Everything except two-tone is red for me. Both firefox 65 and chrome 72 on linux. |
|
@KaelWD really? you are not seeing the outline (and all the others) in Black and White?
|
|
weird
|
|
@KaelWD, is that in Windows / OSX ? |
|
Have the same issue with icon colors in Chrome and Firefox on Mac OS. However, the color works as expected in Safari and on all browsers on Windows. |
|
@petergng what font application do you use? |
|
@Rodrigocoelhojr @KaelWD Testing the |
|
The two tone font can't use color:red but it should be able to use fill:red (but that doesn't work) Looking in chrome dev tools the fill is set to black, rgb(0,0,0) ... You can however use some filters, but not all filter: invert(1) for white, filter: invert(0.5) for grey ... bad sadly you can't seem to filter:sepia(1) invert(0.5) hue-rotate(45deg); to get a custom color.... Oh Nice Colored Two Tone Material Design icons:Without hue-rotate the saturated sepia color will be orange, then you just hue-rotate it to whatever color you want. Reduce the saturate value for duller tones. Codepen: https://codepen.io/sphism/pen/xeaGPW
|
|
As of today, it seems that the Material.io Icons website is now using the icon fonts instead of the former method:
The SVG/PNG exports for an icon are now pinpointing to the resource where it is hosted (at Google Fonts):
Looking at the XHR requests for the site, it seems that the icons are retrieved from this URL: https://fonts.google.com/metadata/icons (P.S. This is a slightly malformed JSON file, just remove the preceding malformed data - Here's what the file looks like without the preceding malformed data (shortened): {
"host": "fonts.gstatic.com",
"asset_url_pattern": "/s/i/{family}/{icon}/v{version}/{asset}",
"families": [
"Material Icons",
"Material Icons Outlined",
"Material Icons Round",
"Material Icons Sharp",
"Material Icons Two Tone"
],
"icons": [
{
"name": "360",
"version": 1,
"unsupported_families": [],
"categories": [
"maps"
],
"tags": []
},
{
"name": "3d_rotation",
"version": 1,
"unsupported_families": [],
"categories": [
"action"
],
"tags": []
},
// ...
]
}(See the metadata file for more info) Attachments: |
|
hot to get outlined fonts ?? |
|
The new font files can now be found in the |
and others
Recently four new themes of icons are available: outlined, rounded, two tone, and sharp. Are these available on Google fonts? If not is there a timeline on when they will be added? Thanks.
The text was updated successfully, but these errors were encountered: