Adjust code examples

docs/guide/angular/advanced/accessibility.md

@@ -17,14 +17,18 @@ This is done because most of the time icons are used for decorative purposes onl
 If you need to make an icon accessible, you can do so by passing a `title` element as a child or passing the `aria-label` prop to the icon component.
 This will remove the `aria-hidden` attribute and make the icon accessible.
 
-```tsx
-<House>
+```angular-html
+<svg lucideHouse>
   <title>This is my house</title>
-</House>
+</svg>
 
 // or
 
-<House aria-label="This is my house" />
+<svg lucideHouse title="This is my house"></svg>
+
+// or
+
+<svg lucideHouse> aria-label="This is my house" />
 ```
 
 We recommend to describe the icon in a way that makes sense for the user, or the action it represents and that makes sense in the context of your application.
@@ -33,9 +37,9 @@ We recommend to describe the icon in a way that makes sense for the user, or the
 
 When using icon buttons, you should not provide an accessible label on the icon itself, but rather on the button.
 
-```tsx
+```angular-html
 <button aria-label="Go to home">
-  <House />
+  <svg lucideHouse></svg>
 </button>
 ```
 

docs/guide/angular/advanced/with-lucide-lab.md

@@ -2,20 +2,28 @@
 
 [Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
 
-They can be used by using the `Icon` component.
-All props like regular lucide icons can be passed to adjust the icon appearance.
+While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:
 
-## Using the `Icon` component
+```html
+<!-- Directly as LucideIconData: -->
+<svg [lucideIcon]="CoconutIcon"></svg>
 
-This creates a single icon based on the iconNode passed and renders a Lucide icon component.
-
-```vue
-<script setup>
-import { Icon } from '@lucide/vue';
-import { baseball } from '@lucide/lab';
-</script>
-
-<template>
-  <Icon :iconNode="baseball" />
-</template>
+<!-- As a provided icon by name: -->
+<svg lucideIcon="coconut"></svg>
+```
+
+```ts{2,6-7,11-12}
+import { provideLucideIcons } from '@lucide/angular';
+import { coconut } from '@lucide/lab';
+
+@Component({
+  templateUrl: './foobar.html',
+  // For using by name via provider:
+  providers: [provideLucideIcons({ coconut })],
+  imports: [LucideIcon]
+})
+export class Foobar {
+  // For passing directly as LucideIconData:
+  readonly CoconutIcon = coconut;
+}
 ```

docs/guide/angular/basics/color.md

@@ -8,53 +8,41 @@ Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/doc
 
 The color can be adjusted by passing the color prop to the element.
 
-::: code-group
-
-```html [app.html]
-<svg lucideSmile color="#3e9392"></svg>
-```
-
-```ts [app.ts]
+```angular-ts
 import { Component } from '@angular/core';
 import { LucideSmile } from '@lucide/angular';
 
 @Component({
-  selector: 'app',
-  templateUrl: './app.html',
-  imports: [LucideSmile],
+  selector: "smile",
+  imports: [ LucideSmile ],
+  template: `
+    <svg lucideSmile color="#3e9392"></svg>
+  `,
 })
 
-export class App { }
+export class SmileComponent { }
 ```
 
-:::
-
 ## Using parent elements text color value
 
 Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
 
 For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered  as `#fff`. This is browser native behavior.
 
-::: code-group
-
-```html [app.html]
-<button style="color:#fff">
-  <svg lucideThumbsUp></svg>
-  Like
-</button>
-```
-
-```ts [app.ts]
+```angular-ts
 import { Component } from '@angular/core';
 import { LucideThumbsUp } from '@lucide/angular';
 
 @Component({
-  selector: 'app',
-  templateUrl: './app.html',
-  imports: [LucideThumbsUp],
+  selector: "like-button",
+  imports: [ LucideThumbsUp ],
+  template: `
+    <button style="color:#fff">
+      <svg lucideThumbsUp></svg>
+      Like
+    </button>
+  `,
 })
 
-export class App { }
+export class LikeButtonComponent { }
 ```
-
-:::

docs/guide/angular/basics/sizing.md

@@ -4,27 +4,21 @@ By default, the size of all icons is `24px` by `24px`. The size is adjustable us
 
 ## Adjusting the icon size using the `size` prop
 
-::: code-group
-
-```html [app.html]
-<svg lucideLandmark size="64"></svg>
-```
-
-```ts [app.ts]
+```angular-ts
 import { Component } from '@angular/core';
 import { LucideLandmark } from '@lucide/angular';
 
 @Component({
-  selector: 'app',
-  templateUrl: './app.html',
-  imports: [LucideLandmark],
+  selector: "landmark",
+  imports: [ LucideLandmark ],
+  template: `
+    <svg lucideLandmark size="64"></svg>
+  `,
 })
 
-export class App { }
+export class LandmarkComponent { }
 ```
 
-:::
-
 ## Adjusting the icon size via CSS
 
 The CSS properties `width` and `height` can be used to adjust the icon size.
@@ -38,11 +32,11 @@ The CSS properties `width` and `height` can be used to adjust the icon size.
 }
 ```
 
-```html [app.html]
+```angular-html [app.html]
 <svg lucideBeer class="my-beer-icon"></svg>
 ```
 
-```ts [app.ts]
+```angular-ts [app.ts]
 import { Component } from '@angular/core';
 import { LucideBeer } from '@lucide/angular';
 
@@ -81,14 +75,14 @@ It is possible to resize icons based on font size. This can be achieved using th
 }
 ```
 
-```html [app.html]
+```angular-html [app.html]
 <div className="text-wrapper">
   <svg lucideStar class="my-icon"></svg>
   <div>Yes</div>
 </div>
 ```
 
-```ts [app.ts]
+```angular-ts [app.ts]
 import { Component } from '@angular/core';
 import { LucideStar } from '@lucide/angular';
 
@@ -109,6 +103,6 @@ export class App { }
 
 ```html [app.html]
 <div>
-  <svg lucidePartyPopper class="size-24" />
+  <svg lucidePartyPopper class="size-24"></svg>
 </div>
 ```

docs/guide/angular/basics/stroke-width.md

@@ -7,26 +7,20 @@ The `strokeWidth` can be adjusted to create a different look of the icons.
 
 ## Adjusting stroke width with `strokeWidth` prop
 
-::: code-group
-
-```html [app.html]
-<svg lucideFolderLock strokeWidth="1"></svg>
-```
-
-```ts [app.ts]
+```angular-ts
 import { Component } from '@angular/core';
 import { LucideFolderLock } from '@lucide/angular';
 
 @Component({
-  selector: 'app',
-  templateUrl: './app.html',
-  styleUrl: './app.css'
-  imports: [LucideFolderLock],
+  selector: "locked-folder",
+  imports: [ LucideFolderLock ],
+  template: `
+    <svg lucideFolderLock strokeWidth="1"></svg>
+  `,
 })
 
-export class App { }
+export class LockedFolderComponent { }
 ```
-:::
 
 ## Absolute stroke width
 
@@ -42,27 +36,21 @@ Note `2px` is the default stroke width for a Lucide icon, this can be adjusted t
 
 Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
 
-::: code-group
-
-```html [app.html]
-<svg
-  lucideRollerCoaster
-  size="96"
-  absoluteStrokeWidth
-/>
-```
-
-```ts [app.ts]
+```angular-ts
 import { Component } from '@angular/core';
-import { LucideFolderLock } from '@lucide/angular';
+import { LucideRollerCoaster } from '@lucide/angular';
 
 @Component({
-  selector: 'app',
-  templateUrl: './app.html',
-  styleUrl: './app.css'
-  imports: [LucideFolderLock],
+  selector: "roller-coaster",
+  imports: [ LucideRollerCoaster ],
+  template: `
+    <svg
+      lucideRollerCoaster
+      size="96"
+      absoluteStrokeWidth
+    ></svg>
+  `,
 })
 
-export class App { }
+export class RollerCoasterComponent { }
 ```
-:::