Branding, Custom, 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 should have custom color palette and integrate 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, Enhance Angular App with Angular Material. Here's the one I picked for LemonMart:

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

Implementing browser manifest and icons

You need to ensure that the browser shows the correct title text and icon in a Browser tab. Further, a manifest file should be created that implements specific icons for various mobile operating systems, so that if a user pins your website...