From 6eaba4cb2b386f231e7b081f58ca91660b946136 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 18 Dec 2024 19:06:51 -0500
Subject: [PATCH 1/3] docs(icon): update angular to standalone

---
 .../icon/basic/angular/example_component_ts.md  |  2 ++
 .../icon/basic/angular/example_component_ts.md  | 17 +++--------------
 static/usage/v8/icon/basic/index.md             |  7 +------
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/static/usage/v7/icon/basic/angular/example_component_ts.md b/static/usage/v7/icon/basic/angular/example_component_ts.md
index 48b43c838c1..b666e579111 100644
--- a/static/usage/v7/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v7/icon/basic/angular/example_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
 import { logoIonic } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { logoIonic } from 'ionicons/icons';
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
+  imports: [IonIcon],
 })
 export class ExampleComponent {
   constructor() {
diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md
index 48b43c838c1..fae171f2e3c 100644
--- a/static/usage/v8/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v8/icon/basic/angular/example_component_ts.md
@@ -1,22 +1,11 @@
 ```ts
 import { Component } from '@angular/core';
-
-import { addIcons } from 'ionicons';
-import { logoIonic } from 'ionicons/icons';
+import { IonIcon } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-  styleUrls: ['example.component.css'],
+  imports: [IonIcon],
 })
-export class ExampleComponent {
-  constructor() {
-    /**
-     * Any icons you want to use in your application
-     * can be registered in app.component.ts and then
-     * referenced by name anywhere in your application.
-     */
-    addIcons({ logoIonic });
-  }
-}
+export class ExampleComponent {}
 ```
diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md
index 3d3a9d93df0..9ee3e2a1c6f 100644
--- a/static/usage/v8/icon/basic/index.md
+++ b/static/usage/v8/icon/basic/index.md
@@ -12,12 +12,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="8"
   code={{
-    javascript: {
-      files: {
-        'index.html': javascript_index_html,
-        'index.ts': javascript_index_ts,
-      },
-    },
+    javascript,
     react,
     vue,
     angular: {

From b9ad11b67fcb6359037169c3ae257d084f9fd7b0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:04:05 -0500
Subject: [PATCH 2/3] docs(icon): update angular to standalone

---
 static/usage/v8/icon/basic/angular/example_component_ts.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md
index fae171f2e3c..3653bf38e59 100644
--- a/static/usage/v8/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v8/icon/basic/angular/example_component_ts.md
@@ -5,6 +5,7 @@ import { IonIcon } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
   imports: [IonIcon],
 })
 export class ExampleComponent {}

From f8e7f266ffecfe1fa527fcbea94d767328e4985c Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 23 Dec 2024 15:34:02 -0500
Subject: [PATCH 3/3] docs(icon): update angular to standalone

---
 static/usage/v8/icon/basic/angular.md              |  6 ------
 .../v8/icon/basic/angular/example_component_ts.md  | 14 +++++++++++++-
 static/usage/v8/icon/basic/index.md                |  7 ++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)
 delete mode 100644 static/usage/v8/icon/basic/angular.md

diff --git a/static/usage/v8/icon/basic/angular.md b/static/usage/v8/icon/basic/angular.md
deleted file mode 100644
index 7dba86b2634..00000000000
--- a/static/usage/v8/icon/basic/angular.md
+++ /dev/null
@@ -1,6 +0,0 @@
-```html
-<ion-icon name="logo-ionic"></ion-icon>
-<ion-icon name="logo-ionic" size="large"></ion-icon>
-<ion-icon name="logo-ionic" color="primary"></ion-icon>
-<ion-icon name="logo-ionic" size="large" color="primary"></ion-icon>
-```
diff --git a/static/usage/v8/icon/basic/angular/example_component_ts.md b/static/usage/v8/icon/basic/angular/example_component_ts.md
index 3653bf38e59..b666e579111 100644
--- a/static/usage/v8/icon/basic/angular/example_component_ts.md
+++ b/static/usage/v8/icon/basic/angular/example_component_ts.md
@@ -2,11 +2,23 @@
 import { Component } from '@angular/core';
 import { IonIcon } from '@ionic/angular/standalone';
 
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
   styleUrls: ['example.component.css'],
   imports: [IonIcon],
 })
-export class ExampleComponent {}
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ logoIonic });
+  }
+}
 ```
diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md
index 9ee3e2a1c6f..3d3a9d93df0 100644
--- a/static/usage/v8/icon/basic/index.md
+++ b/static/usage/v8/icon/basic/index.md
@@ -12,7 +12,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="8"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {