AbsaOSS · fateeand · Jun 10, 2026 · Jun 11, 2026 · Jun 11, 2026 · Jun 11, 2026
@@ -118,7 +118,7 @@ const components: ComponentEntry[] = [
     selector: '.example-content cps-expansion-panel'
   },
   { route: '/file-upload', name: 'File upload', selector: 'cps-file-upload' },
-  // { route: '/icon', name: 'Icon', selector: 'cps-icon' },
+  { route: '/icon', name: 'Icon', selector: '.example-content cps-icon' },
   { route: '/info-circle', name: 'Info circle', selector: 'cps-info-circle' },
   { route: '/input', name: 'Input', selector: '.example-content cps-input' },
   // { route: '/loader', name: 'Loader', selector: 'cps-loader' },

@@ -28,6 +28,14 @@
                         "type": "string",
                         "default": "currentColor",
                         "description": "Color of the icon."
+                    },
+                    {
+                        "name": "ariaLabel",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "''",
+                        "description": "Accessible label for the icon.\nWhen provided the icon is treated as informative (role=\"img\", aria-hidden removed).\nWhen omitted the icon is treated as decorative (aria-hidden=\"true\", role removed)."
                     }
                 ]
             }

@@ -12,13 +12,17 @@
 
   <div class="icon-grid">
     @for (name of filteredIconsList; track name) {
-      <div class="icon-row" (click)="onCopyIconName(name)">
+      <button
+        type="button"
+        class="icon-row"
+        [attr.aria-label]="'Copy ' + name + ' icon name'"
+        (click)="onCopyIconName(name)">
         <cps-icon
           [icon]="name"
           size="normal"
           color="var(--cps-text-primary)"></cps-icon>
         <span>{{ name }}</span>
-      </div>
+      </button>
     }
   </div>
 </app-component-docs-viewer>
@@ -1,22 +1,34 @@
 @use '../../../../variables.scss' as vars;
+@use '../../../../../../cps-ui-kit/styles/mixins' as *;
 
 .search-input {
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
 }
 
 .icon-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+  gap: 1.25rem;
+  margin-left: 0.5rem;
 }
 
 .icon-row {
   display: flex;
   align-items: center;
   width: fit-content;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
   cursor: pointer;
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    @include focus-ring(0.1875rem, 0.3125rem);
+  }
   span {
-    margin-left: 16px;
+    margin-left: 1rem;
     color: var(--cps-text-primary);
   }
 }
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   CpsIconComponent,
@@ -27,8 +27,7 @@ export class IconsPageComponent implements OnInit {
   filteredIconsList: string[] = [];
   componentData = ComponentData;
 
-  // eslint-disable-next-line no-useless-constructor
-  constructor(private _notificationService: CpsNotificationService) {}
+  private _notificationService = inject(CpsNotificationService);
 
   ngOnInit() {
     this.filteredIconsList = iconNames;
@@ -49,7 +48,7 @@ export class IconsPageComponent implements OnInit {
     navigator.clipboard.writeText(name).then(
       () => {
         this._notificationService.success(
-          `Icon ${name} copied to clipboard`,
+          `Icon "${name}" copied to clipboard`,
           undefined,
           { position: CpsNotificationPosition.BOTTOM, timeout: 1000 }
         );

@@ -41,7 +41,6 @@
       <div class="cps-autocomplete-box-area">
         @if (prefixIcon) {
           <cps-icon
-            aria-hidden="true"
             [icon]="prefixIcon"
             [style.color]="disabled ? 'var(--cps-text-muted)' : null"
             [size]="prefixIconSize"
@@ -161,10 +160,7 @@
                 'cps-autocomplete-box-clear-icon-hidden':
                   !persistentClear && !hasSelectedValue()
               }">
-              <cps-icon
-                icon="delete"
-                size="small"
-                aria-hidden="true"></cps-icon>
+              <cps-icon icon="delete" size="small"></cps-icon>
             </span>
           }
           @if (showChevron && options.length) {
@@ -179,7 +175,6 @@
               "
               [tabindex]="disabled ? -1 : 0">
               <cps-icon
-                aria-hidden="true"
                 icon="chevron-down"
                 size="small"
                 [color]="disabled ? 'text-light' : 'text-dark'"></cps-icon>

@@ -72,10 +72,7 @@
       [attr.aria-label]="option.ariaLabel || option.label || null" />
     <span class="cps-btn-toggle-content-option-inner">
       @if (option.icon) {
-        <cps-icon
-          [class.me-2]="!!option.label"
-          [icon]="option.icon"
-          aria-hidden="true">
+        <cps-icon [class.me-2]="!!option.label" [icon]="option.icon">
         </cps-icon>
       }
       @if (option.label) {
@@ -100,10 +97,7 @@
     [style.min-width.rem]="equalWidths ? largestButtonWidthRem : null">
     <span class="cps-btn-toggle-content-option-inner">
       @if (option.icon) {
-        <cps-icon
-          [class.me-2]="!!option.label"
-          [icon]="option.icon"
-          aria-hidden="true">
+        <cps-icon [class.me-2]="!!option.label" [icon]="option.icon">
         </cps-icon>
       }
       @if (option.label) {

@@ -41,7 +41,6 @@
                 : 'text-light'
               : textColor
           "
-          aria-hidden="true"
           [size]="cvtIconSize">
         </cps-icon>
       }

@@ -14,8 +14,7 @@
         class="cps-checkbox-icon"
         [icon]="icon"
         size="small"
-        [color]="disabled ? 'text-mild' : iconColor"
-        aria-hidden="true">
+        [color]="disabled ? 'text-mild' : iconColor">
       </cps-icon>
     }
     @if (label) {

@@ -7,18 +7,14 @@
   }
   <span class="cps-chip-label">{{ label }}</span>
   @if (closable) {
-    <cps-icon
-      role="button"
-      [tabindex]="disabled ? -1 : 0"
+    <button
+      type="button"
+      class="cps-chip-close-btn"
+      [disabled]="disabled"
       [attr.aria-label]="closeButtonAriaLabel"
-      [attr.aria-disabled]="disabled || null"
-      class="cps-chip-close-icon"
-      icon="close-x"
-      size="xsmall"
-      color="text-darkest"
       (click)="onCloseClick($event)"
-      (keydown.enter)="onCloseClick($event)"
-      (keydown.space)="onCloseClick($event)">
-    </cps-icon>
+      (keydown.enter)="$event.stopPropagation()">
+      <cps-icon icon="close-x" size="xsmall" color="text-darkest"></cps-icon>
+    </button>
   }
 </div>
@@ -21,7 +21,12 @@ $color-text-mild: var(--cps-color-text-mild);
     padding-left: 0.75rem;
     padding-right: 0.375rem;
     cursor: default;
-    &-close-icon {
+    &-close-btn {
+      border: none;
+      background: transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       padding: 0.375rem;
       cursor: pointer;
       &:focus {
@@ -44,7 +49,7 @@ $color-text-mild: var(--cps-color-text-mild);
       font-family: 'Source Sans Pro', sans-serif;
       font-style: normal;
       font-weight: 400;
-      &:not(:has(+ .cps-chip-close-icon)) {
+      &:not(:has(+ .cps-chip-close-btn)) {
         margin-right: 0.375rem;
       }
     }
@@ -57,7 +62,7 @@ $color-text-mild: var(--cps-color-text-mild);
         color: $color-text-mild;
       }
       .cps-chip-icon,
-      .cps-chip-close-icon {
+      .cps-chip-close-btn {
         ::ng-deep .cps-icon {
           color: $color-text-mild !important;
         }
@@ -75,11 +80,11 @@ $color-text-mild: var(--cps-color-text-mild);
         margin-left: 0.375rem;
         order: 1;
 
-        &:not(:has(~ .cps-chip-close-icon)) {
+        &:not(:has(~ .cps-chip-close-btn)) {
           margin-right: 0.375rem;
         }
       }
-      .cps-chip-close-icon {
+      .cps-chip-close-btn {
         order: 2;
       }
       .cps-chip-label {

@@ -39,7 +39,7 @@ describe('CpsChipComponent', () => {
     fixture.componentRef.setInput('closable', true);
     fixture.detectChanges();
     const closeIcon = fixture.nativeElement.querySelector(
-      '.cps-chip-close-icon'
+      '.cps-chip-close-btn'
     );
     expect(closeIcon).toBeTruthy();
   });
@@ -50,7 +50,7 @@ describe('CpsChipComponent', () => {
     fixture.componentRef.setInput('label', 'Test');
     fixture.detectChanges();
     const closeIcon = fixture.nativeElement.querySelector(
-      '.cps-chip-close-icon'
+      '.cps-chip-close-btn'
     );
     closeIcon.click();
     expect(component.closed.emit).toHaveBeenCalledWith('Test');

@@ -31,7 +31,6 @@
     @if (prefixIcon) {
       <span class="cps-expansion-panel-prefix-icon">
         <cps-icon
-          aria-hidden="true"
           [icon]="prefixIcon"
           size="small"
           [color]="disabled ? 'text-mild' : 'text-dark'">
@@ -42,7 +41,6 @@
     @if (showChevron && !disabled) {
       <span class="cps-expansion-panel-chevron">
         <cps-icon
-          aria-hidden="true"
           icon="chevron-down"
           size="small"
           color="text-dark">

@@ -101,29 +101,21 @@
         </div>
         @if (!disabled) {
           @if (isProcessingFile) {
-            <cps-icon
-              role="button"
-              tabindex="0"
-              [attr.aria-label]="'Cancel file processing'"
-              class="cps-file-upload-uploaded-file-cancel-process-icon"
-              icon="close-x"
-              color="error"
-              (click)="onCancelFileProcessing($event)"
-              (keydown.enter)="onCancelFileProcessing($event)"
-              (keydown.space)="onCancelFileProcessing($event)">
-            </cps-icon>
+            <button
+              type="button"
+              class="cps-file-upload-uploaded-file-cancel-process-btn"
+              aria-label="Cancel file processing"
+              (click)="onCancelFileProcessing($event)">
+              <cps-icon icon="close-x" color="error"></cps-icon>
+            </button>
           } @else {
-            <cps-icon
-              role="button"
-              tabindex="0"
-              [attr.aria-label]="'Remove uploaded file'"
-              class="cps-file-upload-uploaded-file-remove-icon"
-              icon="remove"
-              color="error"
-              (click)="onRemoveUploadedFile($event)"
-              (keydown.enter)="onRemoveUploadedFile($event)"
-              (keydown.space)="onRemoveUploadedFile($event)">
-            </cps-icon>
+            <button
+              type="button"
+              class="cps-file-upload-uploaded-file-remove-btn"
+              aria-label="Remove uploaded file"
+              (click)="onRemoveUploadedFile($event)">
+              <cps-icon icon="remove" color="error"></cps-icon>
+            </button>
           }
         }
       </div>

@@ -120,11 +120,17 @@ $bg-disabled: var(--cps-color-bg-disabled);
             max-width: calc(100% - 3.75rem);
           }
         }
-        .cps-file-upload-uploaded-file-remove-icon,
-        .cps-file-upload-uploaded-file-cancel-process-icon {
+        .cps-file-upload-uploaded-file-remove-btn,
+        .cps-file-upload-uploaded-file-cancel-process-btn {
+          border: none;
+          background: transparent;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           cursor: pointer;
           flex-shrink: 0;
           margin-left: 0.5rem;
+          padding: 0;
           &:focus {
             outline: none;
           }

@@ -2,13 +2,11 @@
   <i
     [ngClass]="classesList"
     [style.color]="iconColor"
-    [ngStyle]="{
-      width: cvtSize || 'none',
-      height: cvtSize || 'none',
-      display: 'flex'
-    }">
-    <svg>
-      <use attr.xlink:href="{{ url }}icons.svg#{{ icon }}"></use>
+    [style.width]="cvtSize || 'none'"
+    [style.height]="cvtSize || 'none'"
+    [style.display]="'flex'">
+    <svg aria-hidden="true">
+      <use attr.href="{{ url }}icons.svg#{{ icon }}"></use>
     </svg>
   </i>
 }