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" notifications@github.com
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
#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?

[graddotdev]

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.

[LouisKraemer]

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