Branding, customization, and Material icons

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, located at https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. For LemonMart, I picked the following values:

1. Primary Color- #2E7D32:

   $lemon-mart-primary: mat.define-palette(mat.$green-palette, 800);
   

2. Secondary Color- #C6FF00:

   $lemon-mart-accent: mat.define-palette(mat.$lime-palette, A400);
   

   You may either implement your theme in styles.scss or create a separate theme file. A separate...