
Step 1: Install Google Material Icons
There are 2 ways to install Google Material Icons which are 1st by locally saving the Icons directly on the project and 2nd by using the available CDN links provided by Google. For this example, we'll be using the 2nd method which is using the CDN, and also show you all the possible ways to reference the icons type (Outlined, Filled, Rounded, Sharp, Two-tone icons).
Below is the CDN links for all of the types as mentioned above:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"> </head>
Step 2: Define The Material Icon class
In addition to referencing the Material Icons CDN you will also need to define the "class" to render the font properly. The bare minimum that you have to define is like below. Do note that the "font-family" that's specified in this case is the "Material Icons", if you do need the other icon such as "Material Icons Outlined" then you will have to specify another class "material-icons-outlined" and have it reference the "font-family.
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }
resources/css/app.css # or resources/css/app.scss
yarn prod
Step 3: Use the Icon in Laravel Blade
Now from within your Laravel Blade, you can call any of the icons available from the Google Material Icons page.
<span class="material-icons">face</span> <span class="material-icons">menu</span> <span class="material-icons">refresh</span> <span class="material-icons">cancel</span>

Optionals: Self Hosting Material Icons
To self-host, the material icon you have to make sure to specify it using the "@font-face" directive but do make sure that you have the icons downloaded and placed in your Laravel.
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); }