Material-design-icons: Icon request: Wifi icons for different signal strengths

[MarcelRobitaille]

It would be great to have a set of icons for wifi signals of 1 to 4 bars similar to what IcoMoon - Ultimate has as seen here:

[amerkurama]

YY也一样，，，，，，，

On Jul 22, 2016 9:10 AM, "Marcel Robitaille" [email protected]
wrote:

It would be great to have a set of icons for wifi signals of 1 to 4 bars
similar to what IcoMoon - Ultimate has as seen here: [image: Example]
https://camo.githubusercontent.com/3b149aaf9b0fda12dc1cc4f85b8b2dd0d3f3eaed/687474703a2f2f692e696d6775722e636f6d2f5a4f77636e37462e706e67

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/google/material-design-icons/issues/434, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ATlIIcE2RPJWhcVVVgkPeW6vFGWbt7e3ks5qYBiBgaJpZM4JSW4-
.

[WebMaestroFr]

<i class="material-icons">signal_wifi_4_bar</i>

Icon for full signal works "fine", or at least like shown on https://design.google.com/icons/ (shape is filled, and does not actually shows "bars").

<i class="material-icons">signal_wifi_3_bar</i>
<i class="material-icons">signal_wifi_2_bar</i>
<i class="material-icons">signal_wifi_1_bar</i>
<i class="material-icons">signal_wifi_0_bar</i>

These ones are all showing "three bars" and do not behave like "inline" elements. They seem to be here though : https://github.com/google/material-design-icons/blob/master/device/svg/production/ic_signal_wifi_3_bar_48px.svg. So maybe there is a trick ?

[NicholasAsimov]

Wonder this also, why actual font doesn't include signal_wifi_1-3_bar icons even though they're designed and available?

[tjmcclure0501]

Still seems to be th same any ideas for getting icons to show different strengths?

[NicholasAsimov]

@tjmcclure0501 what I did in the end is to import individual SVG icon components and then writing a function that determines what icon to return. Here's an example

import WifiSignal0Icon from 'material-ui/svg-icons/device/signal-wifi-0-bar';
import WifiSignal1Icon from 'material-ui/svg-icons/device/signal-wifi-1-bar';
import WifiSignal2Icon from 'material-ui/svg-icons/device/signal-wifi-2-bar';
import WifiSignal3Icon from 'material-ui/svg-icons/device/signal-wifi-3-bar';
import WifiSignal4Icon from 'material-ui/svg-icons/device/signal-wifi-4-bar';

import WifiSignalLock1Icon from 'material-ui/svg-icons/device/signal-wifi-1-bar-lock';
import WifiSignalLock2Icon from 'material-ui/svg-icons/device/signal-wifi-2-bar-lock';
import WifiSignalLock3Icon from 'material-ui/svg-icons/device/signal-wifi-3-bar-lock';
import WifiSignalLock4Icon from 'material-ui/svg-icons/device/signal-wifi-4-bar-lock';

// Full filled wifi icons in case we couldn't determine network quality
import WifiIcon from 'material-ui/svg-icons/device/network-wifi';
import WifiLockIcon from 'material-ui/svg-icons/device/wifi-lock';

getWifiIcon = (wifiSpot) => {
        const quality =calculateWifiSignal(wifiSpot.quality);

        if (wifiSpot.isProtected) {
            switch (quality) {
                case 0:
                    return <WifiLockIcon />;
                case 1:
                    return <WifiSignalLock1Icon />;
                case 2:
                    return <WifiSignalLock2Icon />;
                case 3:
                    return <WifiSignalLock3Icon />;
                case 4:
                    return <WifiSignalLock4Icon />;
                default:
                    return <WifiLockIcon />
            }
        } else {
            switch (quality) {
                case 0:
                    return <WifiSignal0Icon />;
                case 1:
                    return <WifiSignal1Icon />;
                case 2:
                    return <WifiSignal2Icon />;
                case 3:
                    return <WifiSignal3Icon />;
                case 4:
                    return <WifiSignal4Icon />;
                default:
                    return <WifiIcon />
            }
        }
    };

And then you call this function to give you an icon to pass to a FlatButton, for a example.

<FlatButton
    label="Example"
    icon={getWifiIcon(spot)}
/>

Not the most elegant solution but it works, until maybe we have this issue fixed.

[emouawad]

No Progress on this?

[AlexeySemigradsky]

Will this be fixed?

[lepirlouit]

icons are there,. there are missing in the font.

[venikx]

Not sure if I should piggyback on this issue or create a new one.
The NetworkWifi icon: https://material.io/icons/#ic_network_wifi is exported as
.

If anyone can point me in the right direction I can fix it myself, but I'm unfamiliar with the repository and a quick github search for network didn't yield much results, besides styling.

[Weegle99]

Any news ?

[lepirlouit]

I don't know how the font is created.

[pflammertsma]

@shyndman I don't believe this is merely an icon request; signal_wifi_0_bar and others are listed on the material.io website but are missing from the package. Oddly, signal_wifi_4_bar is the only one of the set that is included.

Specifically, these are missing:

• signal_wifi_0_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_lock

[mazeeblanke]

any update ?

[selfcatering]

Same story with cellular icons, only signal_cellular_4_bar works

[Fmstrat]

Man I just spent a ton of time playing with the font to find this out. Ugh.

[Fmstrat]

I found this to be a useful solution: https://github.com/dcousens/material-wifi-icons

[bmxguy100]

https://github.com/google/material-design-icons/blob/master/iconfont/codepoints#L763
It looks like the icons should be at 0xE1D1 to 0xE1D7...
There is also space for the cellular icons.
Are there any plans to fix this?

[rikkertkoppes]

It is actually buggy now. If you for example use signal_wifi_1_bar_lock as an icon, you will end up with a wifi icon and a lock icon by the power of ligatures, with all the other letters as whitespace in between:

[RUSSCITY]

Please fix it. It still be wrong.

[aguegu]

not even included in 4.0.5, why?

[dmvvilela]

Nothing on this yet? Ive downloaded the SVG from material design website and made my own icons with fluttericon.com..

[zSucrilhos]

It'll be good to have that as well...

[rikkertkoppes]

It's a shame no one is addressing this, but I think the reason the icons are not included in the font is that it is a two-tone image, which is not possible for a font. This would also be the reason cellular and battery intermediate icons are also missing.

I see two options to solve this:

1. get rid of the semitransparent part and make the icon monotone like these
2. solve the two-tone with a css trick, by overlaying a pseudo-element with a different ligature and some transparency, something like this:

.material-icons.signal_wifi_2_bar::before {
    content: "signal_wifi_transparent_background";
    position: absolute;
    z-index: -1;
    opacity: 0.3;
}

Resulting in something like this: