diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index 901c08795..f69b80548 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -58,6 +58,7 @@ import {
selectInterfaces,
selectMenuOpened,
} from './store/selectors';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
describe('AppComponent', () => {
let component: AppComponent;
@@ -111,6 +112,7 @@ describe('AppComponent', () => {
MatSidenavModule,
BypassComponent,
CalloutComponent,
+ MatIconTestingModule,
],
providers: [
{ provide: TestRunService, useValue: mockService },
diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index 55d6ab9dc..e1791764b 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -44,6 +44,7 @@ import { GeneralSettingsComponent } from './pages/settings/general-settings.comp
import { AppStore } from './app.store';
const DEVICES_LOGO_URL = '/assets/icons/devices.svg';
+const DEVICES_RUN_URL = '/assets/icons/device_run.svg';
const REPORTS_LOGO_URL = '/assets/icons/reports.svg';
const TESTRUN_LOGO_URL = '/assets/icons/testrun_logo_small.svg';
const TESTRUN_LOGO_COLOR_URL = '/assets/icons/testrun_logo_color.svg';
@@ -94,6 +95,10 @@ export class AppComponent implements OnInit {
'devices',
this.domSanitizer.bypassSecurityTrustResourceUrl(DEVICES_LOGO_URL)
);
+ this.matIconRegistry.addSvgIcon(
+ 'device_run',
+ this.domSanitizer.bypassSecurityTrustResourceUrl(DEVICES_RUN_URL)
+ );
this.matIconRegistry.addSvgIcon(
'reports',
this.domSanitizer.bypassSecurityTrustResourceUrl(REPORTS_LOGO_URL)
diff --git a/modules/ui/src/app/components/device-item/device-item.component.html b/modules/ui/src/app/components/device-item/device-item.component.html
index 0496d74fb..84117dd34 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.html
+++ b/modules/ui/src/app/components/device-item/device-item.component.html
@@ -61,8 +61,6 @@
attr.aria-label="Start new testrun for device {{ label }}"
class="button-start"
mat-flat-button>
-
- play_arrow
+
diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss
index be2d4980a..f613ec2f1 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.scss
+++ b/modules/ui/src/app/components/device-item/device-item.component.scss
@@ -174,9 +174,8 @@ $border-radius: 12px;
.button-start-icon {
margin: 0;
- width: 24px;
+ width: 30px;
height: 24px;
- font-size: 24px;
}
.device-item {
diff --git a/modules/ui/src/assets/icons/device_run.svg b/modules/ui/src/assets/icons/device_run.svg
new file mode 100644
index 000000000..ec3693133
--- /dev/null
+++ b/modules/ui/src/assets/icons/device_run.svg
@@ -0,0 +1,13 @@
+
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index dcb47d83d..2d3a36009 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -41,6 +41,15 @@ body {
background: $dark-grey;
}
+.button-start {
+ &:hover,
+ &:focus-visible {
+ .button-start-icon path {
+ fill: $white;
+ }
+ }
+}
+
.app-sidebar-button-active .mat-icon path {
fill: $white;
}