Segoe MDL2 Icons cross platform app

[alexbatis]

Great job on the tutorial, the steps are clear and the final look is great!

In regards to the maximize, minimize, restore, and close buttons in the title bar, they use the Segoe MDL2 Icons. This works perfectly for apps on Windows 10, but on older versions of Windows or Mac, the user has to install the font on their system.

From Microsoft

How do I get this font?
On Windows 10: There's nothing you need to do, the font comes with Windows.
On a Mac, you need to download and install the font: Get the Segoe UI and MDL2 icon fonts

For example, a screenshot from running on Windows 7

As electron is useful for developing cross platform apps, it would be most ideal if the user didnt have to install a font package to see these icons. Is there any way to include these icons in a cross platform electron project? For example, I found this repo that provides the icons as a .css file, but unfortunately it doesnt contain the icons referenced in the tutorial.

[binaryfunt]

I'm glad you liked the tutorial!

Unfortunately I don't know how to do that, and cross-platform compatibility is something that I have yet to learn in Electron. If I get to that stage I will update the tutorial, but can't guarantee anything anytime soon. If you figure out how to do it, by all means fork the tutorial/pull request

[digimezzo]

I got it working in a cross platform way:

• Copy SegMDL2.ttf in the assets/font/ folder in your project
• Create a font-face in css:

@font-face {
  font-family: segoe;
  src: url(assets/font/SegMDL2.ttf);
}

• Use the font-face in the #window-controls .button class:

#window-controls .button {
  grid-row: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  user-select: none;
  cursor: default;
  opacity: 0.8;
  font-family: segoe; 
}

[Toby56]

@binaryfunt
Do you actually want this to be done?
If you want this to be macOS compatible then the font file and stuff can be added in easily.
(or you can just have this issue here for reference, or put a note in the readme, with a link to the font files and an example code snippet or something)

[binaryfunt]

@Toby56 I'm not able to test the solution above, but I suppose it looks like it should work. When I get some time I can add it in, or feel free to submit a pull request if you want

[Toby56]

There is a small problem with adding the font files in, the Segoe fonts' license (EULA) says that the fonts can only be used for programs that "run on a Microsoft Platform". I'll make a pr anyway and include the license (because I don't think it really matters), but just bare it in mind.

[Toby56]

You may use the Segoe MDL2 Assets and Segoe UI fonts or glyphs included in this file (“Software”) solely to design, develop and test your programs that run on a Microsoft Platform, a Microsoft Platform includes but is not limited to any hardware or software product or service branded by trademark, trade dress, copyright or some other recognized means, as a product or service of Microsoft. This license does not grant you the right to distribute or sublicense all or part of the Software to any third party. By using the Software you agree to these terms. If you do not agree to these terms, do not use the Software.

[Toby56]

Sooo this is a no go?

[binaryfunt]

@Toby56 Sorry, I'm quite busy at the moment, I'll need some time to consider it.

[digimezzo]

I've created a Pull request which proposes a solution that is independent of Segoe MDL2 Assets font. the Segoe MDL2 glyphs are replaced by SVG's in that solution. Let me know what you think about this.

This is how it looks like:

[Toby56]

@digimezzo I personally think SVGs are a good solution and probably better than a font. They still have some problems with hidpi scaling, but that's another problem. Also just a note, the stroke thickness attributes are redundant because they don't have a stroke colour, only a fill.

[binaryfunt]

As I've commented in #11, I've recreated the icons as PNGs for 100%, 125%, 150% and 175% scaling using <img> srcset in the branch bitmap-icons. Seems to work better than SVGs for pixel-perfection, feel free to check out and report any problems with it.