Support Google Fonts Icons

[damithc]

Should we support these? https://fonts.google.com/icons
Also, is it feasible?

[wxwxwxwx9]

I think it's possible. Maybe we can explore implementing it as a plugin?

[damithc]

I think it's possible. Maybe we can explore implementing it as a plugin?

Support for other icon types are built-in. We can implement this as a plugin only if there is a good reason to differ from others. e.g., if adding this impose a significant performance cost, we can provide it as an optional feature (i.e., plugin)

[riyadh-h]

Just checking if this issue is still active. Thank you.

[damithc]

@riyadh-h feel free to give it a try

[riyadh-h]

So, I tried using these icons, and they don't seem to be aligned with any surrounding text:

I assumed that the font size used for the icons was larger compared to the text's, so I tried resizing them to 18px.
However, this only worsened the render quality of the icons in my opinion:

Do you think we should proceed with the original size, or is there another way to go about this?

[tlylt]

Just curious... have you tried to align the icon via some CSS? (maybe some kind of vertical-align)

[riyadh-h]

@tlylt Not really, but now that you've mentioned it, I tried giving the icons a vertical-align property that's set to bottom, and it looks perfect!

Cheers 😄

EDIT: I'll use Bootstrap's align-middle class instead to align the icons 👍.

[riyadh-h]

After some testing, I noticed that some icons aren't displayed on the rendered page when used.

For example, assume the syntax used looks similar to this:

# Google Material Icons

This is some text preceding the icon :google-work: and this succeeds it.

An:google-face:ther example.

:google-verified:

The resulting page looks like this:

As seen in the screenshot above, the verified icon, which looks like this:

isn't rendered on the page.

I believe the reason for this is that the npm package is outdated (i.e., it isn't updated by its authors when Google adds new icons). However, there is another, unofficial package that contains the new icons (and icon styles, too).

Therefore, if the reason is indeed because the official package is outdated, do you recommend using the unofficial package, or should we use the official one instead?

EDIT: the official developer guide from Google does not mention installing the icons through an npm package anymore, which I believe can be understood as Google ending their support for that package. Therefore, I will proceed using the unofficial package mentioned above.