docs(badge): add/improve "outline" sections

docs/angular/src/content/en/components/badge.mdx

@@ -41,9 +41,9 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
-    ...
-    imports: [..., IgxBadgeModule],
-    ...
+  ...
+  imports: [..., IgxBadgeModule],
+  ...
 })
 export class AppModule {}
 ```
@@ -58,11 +58,11 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 // import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({
-    selector: 'app-home',
-    template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
-    styleUrls: ['home.component.scss'],
-    standalone: true,
-    imports: [IgxBadgeComponent]
+  selector: 'app-home',
+  template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
+  styleUrls: ['home.component.scss'],
+  standalone: true,
+  imports: [IgxBadgeComponent]
 })
 export class HomeComponent {}
 ```
@@ -99,9 +99,8 @@ Next, we will add those components to our template:
 
 ```html
 <div class="wrapper">
-
-    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-    <igx-badge icon="check" type="success"></igx-badge>
+  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+  <igx-badge icon="check" type="success"></igx-badge>
 </div>
 ```
 
@@ -184,11 +183,11 @@ In addition to material icons, the `igx-badge` component also supports usage of
 
 ```ts
 export class BadgeIconComponent implements OnInit { 
-    constructor (protected _iconService: IgxIconService) {}
+  constructor (protected _iconService: IgxIconService) {}
 
-    public ngOnInit() {
-        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
-    }
+  public ngOnInit() {
+    this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
+  }
 }
 ```
 
@@ -200,9 +199,23 @@ Then, just specify the icon name and family as follows:
 
 <Sample src="/data-display/badge-icon" height={100} alt="" />
 
+### Outlined Badge
+
+The `igx-badge` component can also have a subtle border around it when its <ApiLink type="Badge" member="outlined" label="outlined" /> attribute is set.
+
+```html
+<igx-badge outlined></igx-badge>
+```
+
+<Sample src="/data-display/badge-outlined-sample" height={100} alt="" />
+
 ### Dot Badge
 
-The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its <ApiLink type="Badge" member="dot" label="dot" /> property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+
+```html
+<igx-badge dot></igx-badge>
+```
 
 <Sample src="/data-display/badge-dot-sample" height={100} alt="" />
 
@@ -222,8 +235,8 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
 // import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
 
 @NgModule({
-    ...
-    imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
+  ...
+  imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
 })
 export class AppModule {}
 ```
@@ -245,18 +258,13 @@ Next, we're adding the contacts in our template:
   </igx-list-item>
   <igx-list-item *ngFor="let member of members">
     <div class="wrapper">
-
       <div>
         <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
-        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
-
-</div>
+        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>   
+      </div>
       <div class="contact-container">
-
         <span class="contact-name">{{ member.name }}</span>
-
-</div>
-
+      </div>  
 </div>
   </igx-list-item>
 </igx-list>
@@ -268,42 +276,41 @@ We're going to create our members in the typescript file like this:
 // contacts.component.ts
 
 ...
- public members: Member[] = [
-    new Member('Terrance Orta', 'online'),
-    new Member('Donna Price', 'online'),
-    new Member('Lisa Landers', 'away'),
-    new Member('Dorothy H. Spencer', 'offline'),
-  ];
+public members: Member[] = [
+  new Member('Terrance Orta', 'online'),
+  new Member('Donna Price', 'online'),
+  new Member('Lisa Landers', 'away'),
+  new Member('Dorothy H. Spencer', 'offline'),
+];
 
 ```
 
 ```typescript
-
 ...
 class Member {
-    public name: string;
-    public status: string;
-    public type: string;
-    public icon: string;
-
-    constructor(name: string, status: string) {
-        this.name = name;
-        this.status = status;
-        switch (status) {
-            case 'online':
-                this.type = 'success';
-                this.icon = 'check';
-                break;
-            case 'away':
-                this.type = 'warning';
-                this.icon = 'schedule';
-                break;
-            case 'offline':
-                this.type = 'error';
-                this.icon = 'remove';
-                break;
-        }
+  public name: string;
+  public status: string;
+  public type: string;
+  public icon: string;
+
+  constructor(name: string, status: string) {
+    this.name = name;
+    this.status = status;
+    switch (status) {
+      case 'online':
+        this.type = 'success';
+        this.icon = 'check';
+        break;
+      case 'away':
+        this.type = 'warning';
+        this.icon = 'schedule';
+        break;
+      case 'offline':
+        this.type = 'error';
+        this.icon = 'remove';
+        break;
     }
+  }
 }
 ```
 
@@ -313,16 +320,16 @@ Position the badge in its parent container:
 /* contacts.component.css */
 
 .wrapper {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .contact-name {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .contact-container {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .badge-style {
@@ -414,8 +421,10 @@ At the end your badges should look like this:
 
 <Sample src="/data-display/badge-tailwind-styling-sample" height={340} iframeOnly />
 
-## API References
 <hr/>
+
+## API References
+
 - <ApiLink type="Avatar" />
 - <ApiLink type="Badge" />
 - <ApiLink kind="sass" module="themes" type="function-badge-theme" label="IgxBadgeComponent Styles" />