Skip to content
ToolShedby Wasim Shaikh
All Angular Material icons

Signal Wifi Statusbar Connected No Internet icon

signal_wifi_statusbar_connected_no_internet: a legacy Material Icons icon. Copy its <mat-icon> code for Angular Material.

signal_wifi_statusbar_connected_no_internet is only in the legacy Material Icons font, which Google no longer updates. To keep using it, load the legacy font and set fontSet="material-icons-two-tone".

Size
Colour
Template
<mat-icon fontSet="material-icons-two-tone">signal_wifi_statusbar_connected_no_internet</mat-icon>
Component
import { MatIconModule } from '@angular/material/icon';

@Component({
  imports: [MatIconModule],
  // …
})

The fontSet attribute is only needed if material-icons-two-tone is not your app's default font set (see Setup).

Signal Wifi Statusbar Connected No Internet icon variants

Two Tonematerial-icons-two-tone

Examples in Angular Material

Common places to use signal_wifi_statusbar_connected_no_internet, with the template code. Previews are drawn to match Angular Material's Material 3 components.

Icon button

<button mat-icon-button aria-label="Signal Wifi Statusbar Connected No Internet">
  <mat-icon fontSet="material-icons-two-tone">signal_wifi_statusbar_connected_no_internet</mat-icon>
</button>

Button with icon

Signal Wifi Statusbar Connected No Internet
<button mat-flat-button>
  <mat-icon fontSet="material-icons-two-tone">signal_wifi_statusbar_connected_no_internet</mat-icon>
  Signal Wifi Statusbar Connected No Internet
</button>

Floating action button

<button mat-fab aria-label="Signal Wifi Statusbar Connected No Internet">
  <mat-icon fontSet="material-icons-two-tone">signal_wifi_statusbar_connected_no_internet</mat-icon>
</button>

List item

Signal Wifi Statusbar Connected No Internet
<mat-list>
  <mat-list-item>
    <mat-icon fontSet="material-icons-two-tone" matListItemIcon>signal_wifi_statusbar_connected_no_internet</mat-icon>
    <span matListItemTitle>Signal Wifi Statusbar Connected No Internet</span>
  </mat-list-item>
</mat-list>

Toolbar

My App
<mat-toolbar>
  <span>My App</span>
  <span class="spacer"></span>
  <button mat-icon-button aria-label="Signal Wifi Statusbar Connected No Internet">
    <mat-icon fontSet="material-icons-two-tone">signal_wifi_statusbar_connected_no_internet</mat-icon>
  </button>
</mat-toolbar>

Form field prefix

Signal Wifi Statusbar Connected No Internet
<mat-form-field appearance="outline">
  <mat-label>Signal Wifi Statusbar Connected No Internet</mat-label>
  <mat-icon fontSet="material-icons-two-tone" matPrefix>signal_wifi_statusbar_connected_no_internet</mat-icon>
  <input matInput />
</mat-form-field>

How to customize the Signal Wifi Statusbar Connected No Internet icon in Angular Material

Use the controls at the top of this page to preview signal_wifi_statusbar_connected_no_internet at any size and color, then copy the code. Here is what each setting does in your own Angular app.

Change the Signal Wifi Statusbar Connected No Internet icon size

<mat-icon> is fixed at 24 × 24 px, so set width and height along with font-size or the Signal Wifi Statusbar Connected No Internet glyph will overflow its box.

<mat-icon fontSet="material-icons-two-tone" class="signal-wifi-statusbar-connected-no-internet-icon">signal_wifi_statusbar_connected_no_internet</mat-icon>

.signal-wifi-statusbar-connected-no-internet-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
}

Change the Signal Wifi Statusbar Connected No Internet icon color

The icon is a font glyph, so it takes the CSS text color. Set color on the <mat-icon> or on a parent, or use a theme variable to follow light and dark mode.

.signal-wifi-statusbar-connected-no-internet-icon {
  color: #1a73e8;
  /* or follow your Material 3 theme */
  color: var(--mat-sys-primary);
}

Signal Wifi Statusbar Connected No Internet icon FAQ

How do I change the color of the Signal Wifi Statusbar Connected No Internet icon in Angular Material?
Give the <mat-icon> a class and set the CSS color property, for example .signal-wifi-statusbar-connected-no-internet-icon { color: #1a73e8; }. The signal_wifi_statusbar_connected_no_internet icon is a font glyph, so any text color works, including theme variables such as var(--mat-sys-primary).
How do I make the Signal Wifi Statusbar Connected No Internet icon bigger?
Set font-size, width and height together, for example font-size: 40px; width: 40px; height: 40px;. <mat-icon> has a fixed 24px box, so changing font-size alone makes the icon overflow.

About this icon

Name
signal_wifi_statusbar_connected_no_internet
Icon set
Legacy Material Icons only
Also found by
!, attention, caution, cellular, danger, error, exclamation, important, speed
Legacy codepoint
U+F0F8
Licence
Apache License 2.0, free for commercial use (Google Fonts)

Similar icons