Branding, customization, and Material icons

In order to construct an attractive and intuitive toolbar, we must introduce some iconography and branding to the app so that the users can easily navigate through the app with the help of familiar icons.

Branding

In terms of branding, you should ensure that your web app has a custom color palette and integrates with desktop and mobile browser features to bring forward your app's name and iconography.

Color palette

Pick a color palette using the Material Color tool, as discussed in Chapter 5, Delivering High-Quality UX with Material. Here's the one I picked for LemonMart:

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=2E7D32&secondary.color=C6FF00.

1. Rename custom-theme.scss to lemonmart-theme.scss
2. Update angular.json with the new theme file name

   angular.json
   "apps": [ {
     ... 
     "styles": [ 
       "src/lemonmart-theme...