Angular Material 8 Icons Tutorial with Real-world Examples🚀🚀🚀🚀🚀

Today I am going to share with you use Angular Material 8 Icons in Angular 8 app. Angular Material design is advantageous when it comes to building the user interface in no time. Nowadays, the usage of Angular material design is rapidly increasing. Angular material 8 offers lots of robust and beautiful UI components to build the user interface seamlessly. In this tutorial, I will teach how to use Angular Material 8 icons in your Angular 8 project.We’ll learn to use <mat-icon> material design component to display fonts icon and SVG icons. This material design ui component helps us to implement vector-based Angular material icons in angular 8 apps.

Angular Material 8 Icons Tutorial with Real-world Examples

To work with Angular material icons, first setup angular project and angular material ui library, follow the given below process.

Table of contents

1. Install and setup Angular 8 project
2. Install and setup Angular Material 8 ui library
3. Create Custom SVG Icons with Angular Material 8 MatIconRegistry Service

#1 – Install and setup Angular 8 project

We have to install and setup angualr 8 project to display the Angular material 8 icons. Enter the following command.

ng new angular-material8-icons-tutorial

Answer the questions:

# ? Would you like to add Angular routing? = No
# ? Which stylesheet format would you like to use? = CSS

Go to the Angular 8 project folder.

cd angular-material8-icons-tutorial

#2 – Install and setup Angular Material 8 ui library

To set up angular material 8 ui library, enter the following command.

ng add @angular/material

Select the Angular material theme from the given options:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]

Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]

Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]

Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]

It will ask for Hammer.js (Gesture recognition support) and Angular browser animationsupport.

Set up HammerJS for gesture recognition? (Y/n) = Y

? Set up browser animations for Angular Material? (Y/n) = Y

Importing MatIconModule in Separate Angular Material Module

We’ve installed the Angular material UI library in Angular project. I would suggest to create a specific angular-material.module.ts file to manage angular material components.

import { NgModule } from ‘@angular/core’;

import { MatIconModule } from ‘@angular/material’;

@NgModule({

imports: [

MatIconModule

],

exports: [

MatIconModule

]

})
export class AngularMaterialModule { }

Now we can can use angular material icons in our angular app. We just have to declare the <mat-icon> directive in our app to create the vector based material design icons.

Go to app.component.html file and include the code like given below.

<div style=“text-align:center”>

<h1>

<mat-icon>favorite_border</mat-icon>

Hello World

<mat-icon>favorite_border</mat-icon>

</h1>

</div>

Visit app.module.ts file and import the AngularMaterialModule.

/* Angular material */

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

import { AngularMaterialModule } from ‘./material.module’;

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

@NgModule({

declarations: […],

imports: [

BrowserAnimationsModule,

AngularMaterialModule,

],

providers: […],

bootstrap: […],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

To import the angular material theme, include the given below code to your src > index.html file.

<link href=“https://fonts.googleapis.com/css?family=Roboto:300,400,500” rel=“stylesheet”>

<link href=“https://fonts.googleapis.com/icon?family=Material+Icons” rel=“stylesheet”>

Go to src > styles.css file and add the following code.

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Now we are done with installing and setting up angular and angular material library. You can type the below command in terminal to run the angular project.

ng serve --open

Angular material 8 offers plenty of icons, to check out the full list of Angular material icons here.

#3 – Create Custom SVG Icons with Angular Material 8 MatIconRegistry Service

Suppose if you require to use custom svg icon in your angular 8 project. Keep your custom svg icon headphone.svg in your assets folder.

In order to work with custom icons with angular material <mat-icon> directive, we must import HttpClientModule in app.module.ts file.

import { HttpClientModule } from “@angular/common/http”;

@NgModule({

imports: [

HttpClientModule

]

})
export class AppModule {}

After that we are ready to register custom SVG icons with MatIconRegistry angular material service.

Go to app.component.html file and import the MatIconRegistry and place the icon registration service within your angular 8 component’s constructor method.

It takes 2 parameters, the 1st parameter is the icon’s label, and it should be a string type. Our 2nd parameter is the icons location path pointing towards the icon and its a SafeResourceUrl type. We need to import the DomSanitizer service to parse the url string path into SafeResourceUrl.

import { Component } from ‘@angular/core’;

import { MatIconRegistry } from “@angular/material/icon”;

import { DomSanitizer } from “@angular/platform-browser”;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

constructor(

private matIconRegistry: MatIconRegistry,

private domSanitizer: DomSanitizer

) {

this.matIconRegistry.addSvgIcon(

“musicon”,

this.domSanitizer.bypassSecurityTrustResourceUrl(“…/assets/headphone.svg”)

);

}

}

Finally, we’ve setup the required services to create custom SVG icons within our Angular 8 app using Angular material 8 ui library.

The final step is to use the headphone.svg icon in app.component.html file.

<mat-icon svgIcon=“musicon”></mat-icon>

Now you can display custom svg icon in your app using MatIconRegistry service.

ng serve --open

Angular Material 8 icons tutorial is completed now, i hope you must have loved it. Thanks for reading, have a good day!

Originally published by  Digamber Rawat at positronx.io

====================================================================

Follow me on Facebook | Twitter

Learn More

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular Crash Course for Busy Developers

☞ Angular Essentials (Angular 2+ with TypeScript)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ Angular & NodeJS - The MEAN Stack Guide

#angular

What is GEEK

Buddha Community

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

Laravel 8 Tutorial For Beginners

In this tutorial, i will provide you some useful tutorial of laravel 8 version. So, you can learn laravel 8 an easy way.

#laravel 8 tutorial for beginners #laravel 8 tutorial for beginners step by step #laravel 8 tutorial #laravel 8 authentication tutorial