diff --git a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts
index 44ab3449..ec1d11cc 100644
--- a/openvidu-components/openvidu-additional-panels/src/app/app.component.ts
+++ b/openvidu-components/openvidu-additional-panels/src/app/app.component.ts
@@ -8,8 +8,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
   template: `
       <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
         <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-          <button (click)="toggleMyPanel('my-panel')">MY PANEL</button>
-          <button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</button>
+          <button mat-icon-button (click)="toggleMyPanel('my-panel')">
+		  	<mat-icon>360</mat-icon>
+		  </button>
+          <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
+		  	<mat-icon>star</mat-icon>
+		  </button>
         </div>
         <div *ovAdditionalPanels id="my-panels">
           <div id="my-panel1" *ngIf="showExternalPanel">
diff --git a/openvidu-components/openvidu-additional-panels/src/app/app.module.ts b/openvidu-components/openvidu-additional-panels/src/app/app.module.ts
index e256b354..79db99fc 100644
--- a/openvidu-components/openvidu-additional-panels/src/app/app.module.ts
+++ b/openvidu-components/openvidu-additional-panels/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 const config: OpenViduAngularConfig = {
   production: environment.production
@@ -17,6 +19,8 @@ const config: OpenViduAngularConfig = {
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
     OpenViduAngularModule.forRoot(config)
   ],
   providers: [],
diff --git a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts
index e8ed67f4..7c3f19a5 100644
--- a/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts
+++ b/openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts
@@ -1,43 +1,55 @@
-import { Component } from '@angular/core';
-import { catchError, throwError as observableThrowError } from 'rxjs';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-
-import { OpenViduService, TokenModel } from 'openvidu-angular';
+import { Component } from "@angular/core";
+import { catchError, throwError as observableThrowError } from "rxjs";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 
+import { OpenViduService, TokenModel } from "openvidu-angular";
 
 @Component({
-  selector: 'app-root',
-  template: `
-    <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
+	selector: "app-root",
+	template: `
+		<ov-videoconference
+			*ngIf="connected"
+			(onJoinButtonClicked)="onJoinButtonClicked()"
+			[tokens]="tokens"
+			[toolbarDisplaySessionName]="false"
+		>
 			<div *ovParticipantPanelItemElements="let participant">
-				<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
+				<button *ngIf="participant.local" (click)="leaveSession()">
+					Leave
+				</button>
 			</div>
 		</ov-videoconference>
-  `,
-  styles: []
+
+		<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
+	`,
+	styles: [],
 })
 export class AppComponent {
-  title = 'openvidu-custom-participant-panel-item-elements';
+	title = "openvidu-custom-participant-panel-item-elements";
+	tokens!: TokenModel;
+	connected = true;
+	sessionId = "participants-panel-directive-example";
+	OPENVIDU_SERVER_URL = "https://localhost:4443";
+	OPENVIDU_SERVER_SECRET = "MY_SECRET";
 
-  tokens!: TokenModel;
-	sessionId = 'participants-panel-directive-example';
-	OPENVIDU_SERVER_URL = 'https://localhost:4443';
-	OPENVIDU_SERVER_SECRET = 'MY_SECRET';
-
-	constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
+	constructor(
+		private httpClient: HttpClient,
+		private openviduService: OpenViduService
+	) {}
 
 	async onJoinButtonClicked() {
 		this.tokens = {
 			webcam: await this.getToken(),
-			screen: await this.getToken()
+			screen: await this.getToken(),
 		};
 	}
 
 	leaveSession() {
 		this.openviduService.disconnect();
+		this.connected = false;
 	}
 
-      	/**
+	/**
 	 * --------------------------
 	 * SERVER-SIDE RESPONSIBILITY
 	 * --------------------------
@@ -60,19 +72,25 @@ export class AppComponent {
 			const body = JSON.stringify({ customSessionId: sessionId });
 			const options = {
 				headers: new HttpHeaders({
-					Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
-					'Content-Type': 'application/json'
-				})
+					Authorization:
+						"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
+					"Content-Type": "application/json",
+				}),
 			};
 			return this.httpClient
-				.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
+				.post(
+					this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
+					body,
+					options
+				)
 				.pipe(
 					catchError((error) => {
 						if (error.status === 409) {
 							resolve(sessionId);
 						} else {
 							console.warn(
-								'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
+								"No connection to OpenVidu Server. This may be a certificate error at " +
+									this.OPENVIDU_SERVER_URL
 							);
 							if (
 								window.confirm(
@@ -84,7 +102,9 @@ export class AppComponent {
 										'"'
 								)
 							) {
-								location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
+								location.assign(
+									this.OPENVIDU_SERVER_URL + "/accept-certificate"
+								);
 							}
 						}
 						return observableThrowError(error);
@@ -92,7 +112,7 @@ export class AppComponent {
 				)
 				.subscribe((response: any) => {
 					console.log(response);
-					resolve(response['id']);
+					resolve(response["id"]);
 				});
 		});
 	}
@@ -102,12 +122,20 @@ export class AppComponent {
 			const body = {};
 			const options = {
 				headers: new HttpHeaders({
-					Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
-					'Content-Type': 'application/json'
-				})
+					Authorization:
+						"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
+					"Content-Type": "application/json",
+				}),
 			};
 			return this.httpClient
-				.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
+				.post(
+					this.OPENVIDU_SERVER_URL +
+						"/openvidu/api/sessions/" +
+						sessionId +
+						"/connection",
+					body,
+					options
+				)
 				.pipe(
 					catchError((error) => {
 						reject(error);
@@ -116,10 +144,8 @@ export class AppComponent {
 				)
 				.subscribe((response: any) => {
 					console.log(response);
-					resolve(response['token']);
+					resolve(response["token"]);
 				});
 		});
 	}
-
-
 }
diff --git a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts
index 9ca0a03c..36bd5678 100644
--- a/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts
+++ b/openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts
@@ -8,8 +8,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
   template: `
     <ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
 			<div *ovToolbarAdditionalButtons style="text-align: center;">
-				<button (click)="toggleVideo()">Toggle Video</button>
-				<button (click)="toggleAudio()">Toggle Audio</button>
+				<button mat-icon-button (click)="toggleVideo()">
+					<mat-icon>videocam</mat-icon>
+				</button>
+				<button mat-icon-button (click)="toggleAudio()">
+					<mat-icon>mic</mat-icon>
+				</button>
 			</div>
 		</ov-videoconference>
   `,
diff --git a/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts b/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts
index eb26ace4..55899800 100644
--- a/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts
+++ b/openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 const config: OpenViduAngularConfig = {
   production: environment.production
@@ -17,6 +19,8 @@ const config: OpenViduAngularConfig = {
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
     OpenViduAngularModule.forRoot(config)
 
   ],