From c7d9c65a5202a10b500f3ff352e511d700374ffa Mon Sep 17 00:00:00 2001
From: Maximilian Koeller <maximilian.koeller@siemens.com>
Date: Mon, 9 Feb 2026 15:34:39 +0100
Subject: [PATCH] docs(quickstart): update quickstart for v49

Adds a new chapter for Siemens theming
and fixes the example to use the correct icons.
---
 docs/get-started/quickstart.md | 47 +++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/docs/get-started/quickstart.md b/docs/get-started/quickstart.md
index 72b909c20..d7771acb2 100644
--- a/docs/get-started/quickstart.md
+++ b/docs/get-started/quickstart.md
@@ -77,6 +77,7 @@ Answer the following questions as desired. Note: We are not yet
 
 - `@siemens/element-ng` provides the components
 - `@siemens/element-theme` provides global styles
+- `@siemens/element-icons` provides the icons
 - `@siemens/element-translate-ng` provides a facade for different translation
   libraries (or none), including `ngx-translate` and `@angular/localize`
 - `@angular/cdk` for support from the Angular component development kit
@@ -162,9 +163,9 @@ update the imports in the `app.ts` accordingly.
       </div>
     </div>
     <div class="dropdown-divider"></div>
-    <button si-header-dropdown-item icon="element-user" type="button">Profile</button>
+    <button si-header-dropdown-item type="button" [icon]="icons.elementUser">Profile</button>
     <div class="dropdown-divider"></div>
-    <button si-header-dropdown-item icon="element-logout" type="button">Logout</button>
+    <button si-header-dropdown-item type="button" [icon]="icons.elementLogout">Logout</button>
   </si-header-dropdown>
 </ng-template>
 ```
@@ -184,6 +185,8 @@ import {
   SiHeaderDropdownItemComponent,
   SiHeaderDropdownTriggerDirective
 } from '@siemens/element-ng/header-dropdown';
+import { addIcons } from '@siemens/element-ng/icon';
+import { elementLogout, elementUser } from '@siemens/element-icons';
 
 @Component({
   selector: 'app-root',
@@ -201,10 +204,46 @@ import {
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App {}
+export class App {
+  protected readonly icons = addIcons({
+    elementUser,
+    elementLogout
+  });
+}
 ```
 
-## Step 5 - Start the application
+## Step 5 - Add Siemens Theme (optional / only for Siemens Apps)
+
+Install the Siemens brand package:
+
+```sh
+npm install @simpl/brand
+```
+
+Update the `styles.scss` to include the Siemens brand assets:
+
+```scss
+@use '@simpl/brand/assets/fonts/styles/siemens-sans';
+
+@use '@simpl/brand/dist/element-theme-siemens-brand-light' as brand-light;
+@use '@simpl/brand/dist/element-theme-siemens-brand-dark' as brand-dark;
+
+// This replaces the previous @use '@siemens/element-theme/src/theme' statement and needs to be added after the brand themes.
+@use '@siemens/element-theme/src/theme' with (
+  $element-theme-default: 'siemens-brand',
+  $element-themes: (
+    'siemens-brand',
+    'element'
+  )
+);
+
+// Create the an Element theme based on the Siemens brand tokens.
+@use '@siemens/element-theme/src/styles/themes';
+@include themes.make-theme(brand-light.$tokens, 'siemens-brand');
+@include themes.make-theme(brand-dark.$tokens, 'siemens-brand', true);
+```
+
+## Step 6 - Start the application
 
 Now you should be ready to start the application with Element. Go to the project
 directory and launch the server.