https://developer.salesforce.com/docs/component-library/tools/playground/jhnQTPhHF/4/edit

Is it possible to create cascaded dropdown in sf lightning. Please have a look at above playground link.

  utilityAPI.setUtilityIcon({icon: 'user'});
  Utlity bar has readymade set icons but can we set our own icon ?

<template>
<div if:false={loggedIn} class="slds-m-around_medium"> <span>Login to Salesforce App</span> <div>
<lightning-input data-username='username' label="Username"></lightning-input>
<lightning-input type="password" data-password='password' label="Password">
</lightning-input> <br/>
<lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
</div>
</div>
</template>

JS

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement
{
loggedIn = false;
username = '';
password = '';
login()
{
this.username = this.template.querySelector("lightning-input[data-username]").value;
this.password = this.template.querySelector("lightning-input[data-password]").value
console.log("Username>> ", this.username); console.log("Password>> ", this.password);
}
}

 this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId:this.recordId,  //can we load by email ? 
                objectApiName: 'Cpntact',
                actionName: 'view'
            }
        });
I want to load contact by email , if its not possible i will have to fetch contact by email and then use its recordid. 
How to fetch contact by email using @wire api ? 

  utilityAPI.setUtilityIcon({icon: 'user'});
  Utlity bar has readymade set icons but can we set our own icon ?

https://developer.salesforce.com/docs/component-library/tools/playground/jhnQTPhHF/4/edit

Is it possible to create cascaded dropdown in sf lightning. Please have a look at above playground link.

<template>
<div if:false={loggedIn} class="slds-m-around_medium"> <span>Login to Salesforce App</span> <div>
<lightning-input data-username='username' label="Username"></lightning-input>
<lightning-input type="password" data-password='password' label="Password">
</lightning-input> <br/>
<lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
</div>
</div>
</template>

JS

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement
{
loggedIn = false;
username = '';
password = '';
login()
{
this.username = this.template.querySelector("lightning-input[data-username]").value;
this.password = this.template.querySelector("lightning-input[data-password]").value
console.log("Username>> ", this.username); console.log("Password>> ", this.password);
}
}

 this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId:this.recordId,  //can we load by email ? 
                objectApiName: 'Cpntact',
                actionName: 'view'
            }
        });
I want to load contact by email , if its not possible i will have to fetch contact by email and then use its recordid. 
How to fetch contact by email using @wire api ?