Skip to content
ToolShedby Wasim Shaikh
All Angular Material icons

Smart Button icon

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

smart_button 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".

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

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

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

Smart Button icon variants

Filledmaterial-icons
Outlinedmaterial-icons-outlined
Roundmaterial-icons-round
Sharpmaterial-icons-sharp
Two Tonematerial-icons-two-tone

Examples in Angular Material

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

Icon button

<button mat-icon-button aria-label="Smart Button">
  <mat-icon fontSet="material-icons">smart_button</mat-icon>
</button>

Button with icon

Smart Button
<button mat-flat-button>
  <mat-icon fontSet="material-icons">smart_button</mat-icon>
  Smart Button
</button>

Floating action button

<button mat-fab aria-label="Smart Button">
  <mat-icon fontSet="material-icons">smart_button</mat-icon>
</button>

List item

Smart Button
<mat-list>
  <mat-list-item>
    <mat-icon fontSet="material-icons" matListItemIcon>smart_button</mat-icon>
    <span matListItemTitle>Smart Button</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="Smart Button">
    <mat-icon fontSet="material-icons">smart_button</mat-icon>
  </button>
</mat-toolbar>

Form field prefix

Smart Button
<mat-form-field appearance="outline">
  <mat-label>Smart Button</mat-label>
  <mat-icon fontSet="material-icons" matPrefix>smart_button</mat-icon>
  <input matInput />
</mat-form-field>

How to customize the Smart Button icon in Angular Material

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

Change the Smart Button icon size

<mat-icon> is fixed at 24 × 24 px, so set width and height along with font-size or the Smart Button glyph will overflow its box.

<mat-icon fontSet="material-icons" class="smart-button-icon">smart_button</mat-icon>

.smart-button-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
}

Change the Smart Button 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.

.smart-button-icon {
  color: #1a73e8;
  /* or follow your Material 3 theme */
  color: var(--mat-sys-primary);
}

Smart Button icon FAQ

How do I change the color of the Smart Button icon in Angular Material?
Give the <mat-icon> a class and set the CSS color property, for example .smart-button-icon { color: #1a73e8; }. The smart_button icon is a font glyph, so any text color works, including theme variables such as var(--mat-sys-primary).
How do I make the Smart Button 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
smart_button
Icon set
Legacy Material Icons only
Also found by
action, ai, artificial, automatic, automation, components, composer, custom, function, genai, intelligence, magic, site, spark, sparkle, special, star, stars, ui, ux, website
Legacy codepoint
U+F1C1
Licence
Apache License 2.0, free for commercial use (Google Fonts)

Similar icons