Judicious use of icons can help convey the meaning of application elements and greatly enhance user experience. For those of us who develop using Angular, we have a tremendous variety of icons to choose from, thanks to Material icons. These are beautifully crafted symbols for common actions and items for use in Android, iOS, and Web applications. Material Icons are provided using two flavors: font and SVG. As we’ll learn in this tutorial, adding Material Icons to your Angular projects is easy enough that there’s really no excuse not to! We’ll be focusing on font-based icons here today. SVG icons will be the subject of an up-coming article.
To learn about Javascript check out TechRepublic Academy!
Setting Up the Test Project
You may already have a project to which you’d like to add Material Icons, but for the sake of this tutorial, we’ll create one from scratch. Here’s the command to create a new project using the Angular CLI:
ng new angular-mat-icons-tutorial
Next, CD into the angular-mat-icons-tutorial project folder and you’re ready to get started!
Installing the Angular Material UI library
Before we can use Material Icons in our project, we have to set up the Material UI library. Here’s how to do that:
- The following command will add the angular material ui library:
ng add @angular/material
- The CLI will now ask if you’d like to include Angular Material Typography and Animations packages
Go ahead and answer Yes to both. It’s all good!
Importing the Material Icon Module
Every Material component is declared in its own module. That way, you can choose to include as few or as many components as you need. I personally like to create a separate module dedicated to angular material components that includes only those components I need. Here’s how to create the material.module.ts file using the ng command:
ng g m shared/modules/material
Note that the “g m” is short for “generate module”.
Now, navigate to the shared/modules/material.module.ts and open it in your favorite editor or IDE (I’m partial to VS Code myself) and add the MatIconModule as follows:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
const materialModules = [
MatIconModule
];
@NgModule({
declarations: [],
imports: [
CommonModule,
...materialModules
],
exports: [
...materialModules
]
})
export class MaterialModule { }
Next time we need to include a module, we just need to add it to the materialModules array.
The last step is to import our MaterialModule in the app.module.ts file. That will give all application components access to Material components.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './shared/modules/material/material.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Importing the Angular Material Fonts and Theme
It’s important to keep in mind that Angular Material employs a font to render its icons. If you open the index.html file, you should see two links to the googleapis fonts:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular MatIcons Tutorial</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography"> <app-root></app-root> </body> </html>
Remember how we chose a theme when we installed the Angular Material library. To use that theme we need to import it into our styles.css, styles.scss, or styles.sass file, depending on which type of styling you chose earlier. While not a requirement for Mat-Icons, styling does play a key role for many other material components. The @import statement is what you’ll need to add:
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
Including Material Icons in a Component
We’re now ready to use Material Icons in our components! To keep things simple, we’ll just update the app.component.html page to contain some user satisfaction icons:
<p>How would you rate Angular Material Icons?</p> <mat-icon aria-label="Example home icon">sentiment_very_dissatisfied</mat-icon> <mat-icon aria-label="Example home icon">sentiment_dissatisfied</mat-icon> <mat-icon aria-label="Example home icon">sentiment_neutral</mat-icon> <mat-icon aria-label="Example home icon">sentiment_satisfied</mat-icon> <mat-icon aria-label="Example home icon">sentiment_very_satisfied</mat-icon>
To view the above content in the browser, issue the ng serve command and navigate to http://localhost:4200/ in your browser of choice. You should see the following:
There’s a demo of the project on Codesandbox.io.
Conclusion
In this tutorial, we learned how easy it is to add Material Icons to an Angular 11 project. The only thing we haven’t covered is how to choose the right icon for the job. Well, that’s easiest of all. Just head on over to the Material Design site and pick one! You’ll find its name underneath the icon:
