From 639639cb95a42ab0412a12208ddfb81d1a76f0ef Mon Sep 17 00:00:00 2001
From: "renan.arosario" <renan.arosario@totvs.com.br>
Date: Wed, 10 Jul 2024 15:42:14 -0300
Subject: [PATCH] =?UTF-8?q?feat(icon):=20anuncia=20deprecia=C3=A7=C3=A3o?=
 =?UTF-8?q?=20A=20Lib=20Po=20Icon=20est=C3=A1=20depreciada=20e=20ser=C3=A1?=
 =?UTF-8?q?=20removida=20na=20v20=20do=20PO=20UI.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes DTHFUI-9008

BREAKING CHANGE: Depreciação da Lib Po Icon
A Lib Po Icon está depreciada e será removida na v20 do PO UI.

Antes:

É possível usar qualquer um dos ícones da [Lib PO Icon](/guides/icons).

Depois:

Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme documentação.
---
 .../po-page-dynamic-table-custom-action.interface.ts     | 8 +++++++-
 ...o-page-dynamic-table-custom-table-action.interface.ts | 8 +++++++-
 .../lib/components/po-badge/po-badge-base.component.ts   | 9 ++++++++-
 .../po-button-group/po-button-group-item.interface.ts    | 8 +++++++-
 .../lib/components/po-button/po-button-base.component.ts | 8 +++++++-
 .../po-dynamic-form/po-dynamic-form-field.interface.ts   | 9 ++++++++-
 .../po-dynamic-view/po-dynamic-view-field.interface.ts   | 9 ++++++++-
 .../po-field/po-combo/po-combo-base.component.ts         | 8 +++++++-
 .../po-field/po-input/po-input-base.component.ts         | 8 +++++++-
 .../ui/src/lib/components/po-icon/po-icon.component.ts   | 8 +++++++-
 .../interfaces/po-item-list-action.interface.ts          | 9 +++++++--
 .../src/lib/components/po-menu/po-menu-item.interface.ts | 9 +++++++--
 .../lib/components/po-modal/po-modal-base.component.ts   | 8 +++++++-
 .../interfaces/po-navbar-icon-action.interface.ts        | 9 +++++++--
 .../lib/components/po-popup/po-popup-action.interface.ts | 9 +++++++--
 .../po-table-column-icon.interface.ts                    | 7 +++++--
 .../po-table-column-label.interface.ts                   | 6 +++++-
 .../src/lib/components/po-tag/po-tag-base.component.ts   | 6 +++++-
 .../components/po-toolbar/po-toolbar-base.component.ts   | 6 +++++-
 19 files changed, 128 insertions(+), 24 deletions(-)

diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
index 422c23b35..d8f314c58 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-action.interface.ts
@@ -48,12 +48,18 @@ export interface PoPageDynamicTableCustomAction {
    *
    * Define um ícone que será exibido ao lado esquerdo do rótulo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-component
    *  [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
    * </po-component>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    *
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
diff --git a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
index 9eda80483..c1358e810 100644
--- a/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
+++ b/projects/templates/src/lib/components/po-page-dynamic-table/interfaces/po-page-dynamic-table-custom-table-action.interface.ts
@@ -57,13 +57,19 @@ export interface PoPageDynamicTableCustomTableAction {
    *
    * Define um ícone que será exibido ao lado esquerdo do rótulo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-component
    *  [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
    * </po-component>
    * ```
    *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * <po-component
diff --git a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
index 0b4f53394..82e43e43b 100644
--- a/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
+++ b/projects/ui/src/lib/components/po-badge/po-badge-base.component.ts
@@ -88,10 +88,17 @@ export class PoBadgeBaseComponent {
    * ```
    * <po-badge [p-icon]="true"></po-badge>
    * ```
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-badge p-icon="po-icon-user"></po-badge>
    * ```
+   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-badge p-icon="fa fa-podcast"></po-badge>
diff --git a/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts b/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
index d2ff7d4a8..09a74366f 100644
--- a/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
+++ b/projects/ui/src/lib/components/po-button-group/po-button-group-item.interface.ts
@@ -22,12 +22,18 @@ export interface PoButtonGroupItem {
   /**
    * Ícone exibido ao lado esquerdo do label do botão.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * buttons: Array<PoButtonGroupItem> = [
    *  { label: 'Button 1', action: this.action.bind(this), icon: 'po-icon-user' },
    * ];
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * buttons: Array<PoButtonGroupItem> = [
diff --git a/projects/ui/src/lib/components/po-button/po-button-base.component.ts b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
index 43bb6246a..39e7e0e34 100644
--- a/projects/ui/src/lib/components/po-button/po-button-base.component.ts
+++ b/projects/ui/src/lib/components/po-button/po-button-base.component.ts
@@ -86,10 +86,16 @@ export class PoButtonBaseComponent {
    * @description
    * Ícone exibido ao lado esquerdo do label do botão.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-button p-icon="po-icon-user" p-label="PO button"></po-button>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts
index 3b7029a33..c0d01bfaa 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-field.interface.ts
@@ -114,7 +114,14 @@ export interface PoDynamicFormField extends PoDynamicField {
    * - Combo;
    * - Password;
    *
-   * > Veja a disponibilidade de ícones em [biblioteca de ícones](guides/icons).
+   * > **Deprecated v20.x.x.** Veja a disponibilidade de ícones em [biblioteca de ícones](guides/icons).
+   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    */
   icon?: string | TemplateRef<void>;
 
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts
index f5d471861..da6c9a478 100644
--- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts
+++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts
@@ -70,7 +70,14 @@ export interface PoDynamicViewField extends PoDynamicField {
   /**
    * Define um ícone que será exibido ao lado do valor para o campo do tipo *tag*.
    *
-   * > Veja os valores válidos na [biblioteca de ícones](guides/icons).
+   * > **Deprecated v20.x.x.** Veja os valores válidos na [biblioteca de ícones](guides/icons).
+   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    */
   icon?: string;
 
diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
index 944da6ffe..07d205801 100644
--- a/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-combo/po-combo-base.component.ts
@@ -163,10 +163,16 @@ export abstract class PoComboBaseComponent implements ControlValueAccessor, OnIn
    *
    * Define o ícone que será exibido no início do campo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-combo p-icon="po-icon-user" p-label="PO combo"></po-combo>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-combo p-icon="fa fa-podcast" p-label="PO combo"></po-combo>
diff --git a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
index eccdd6ee7..36dc62b7b 100644
--- a/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
+++ b/projects/ui/src/lib/components/po-field/po-input/po-input-base.component.ts
@@ -72,10 +72,16 @@ export abstract class PoInputBaseComponent implements ControlValueAccessor, Vali
    *
    * Define o ícone que será exibido no início do campo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-input p-icon="po-icon-user" p-label="PO input"></po-input>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-input p-icon="fa fa-podcast" p-label="PO input"></po-input>
diff --git a/projects/ui/src/lib/components/po-icon/po-icon.component.ts b/projects/ui/src/lib/components/po-icon/po-icon.component.ts
index 875c848a2..845b8e44e 100644
--- a/projects/ui/src/lib/components/po-icon/po-icon.component.ts
+++ b/projects/ui/src/lib/components/po-icon/po-icon.component.ts
@@ -26,10 +26,16 @@ export class PoIconComponent {
   /**
    * Define o ícone a ser exibido.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-button p-icon="po-icon-user" p-label="PO button"></po-button>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-button p-icon="fa fa-podcast" p-label="PO button"></po-button>
diff --git a/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts b/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
index 3d6c36e9b..fb71e4956 100644
--- a/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
+++ b/projects/ui/src/lib/components/po-listbox/po-item-list/interfaces/po-item-list-action.interface.ts
@@ -22,13 +22,18 @@ export interface PoItemListAction {
    *
    * Define um ícone que será exibido ao lado esquerdo do rótulo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-component
    *  [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
    * </po-component>
    * ```
-   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * <po-component
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts b/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
index 7b7b53f02..ee38c5e7e 100644
--- a/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
+++ b/projects/ui/src/lib/components/po-menu/po-menu-item.interface.ts
@@ -33,13 +33,18 @@ export interface PoMenuItem {
   action?: Function;
 
   /**
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-menu
    *  [p-menus]="[{ link: '/', label: 'PO ICON', icon: 'po-icon-news' }]">
    * </po-menu>
    * ```
-   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * <po-menu
diff --git a/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts b/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
index 5af85a5d7..9c24f3b32 100644
--- a/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
+++ b/projects/ui/src/lib/components/po-modal/po-modal-base.component.ts
@@ -130,10 +130,16 @@ export class PoModalBaseComponent {
    * @description
    * Ícone exibido ao lado esquerdo do label do titúlo da modal.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-modal p-icon="po-icon-user" p-title="PO Modal"></po-modal>
    * ```
+   *  Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-modal p-icon="fa fa-podcast" p-title="PO Modal"></po-modal>
diff --git a/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts b/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
index 731d3a338..c88988a66 100644
--- a/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
+++ b/projects/ui/src/lib/components/po-navbar/interfaces/po-navbar-icon-action.interface.ts
@@ -20,13 +20,18 @@ export interface PoNavbarIconAction {
   /**
    * Ícone exibido.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-navbar
    *   [p-icon-actions]="[{ link: '/', icon: 'po-icon-news' }]">
    * </po-navbar>
    * ```
-   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * <po-navbar
diff --git a/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts b/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
index b836466c2..38ba47c23 100644
--- a/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
+++ b/projects/ui/src/lib/components/po-popup/po-popup-action.interface.ts
@@ -25,13 +25,18 @@ export interface PoPopupAction {
    *
    * Define um ícone que será exibido ao lado esquerdo do rótulo.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-component
    *  [p-property]="[{ label: 'PO ICON', icon: 'po-icon-news' }]">
    * </po-component>
    * ```
-   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-component
+   *  [p-property]="[{ label: 'ICON', icon: 'ph ph-user' }]">
+   * </po-component>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * <po-component
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
index 1c070b29d..c575bf1f8 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.interface.ts
@@ -41,11 +41,14 @@ export interface PoTableColumnIcon {
   disabled?: Function;
 
   /**
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * [ { icon: 'po-icon-plus' } ]
    * ```
-   *
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * [{ icon: 'ph ph-user' }]
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca Font Awesome, da seguinte forma:
    * ```
    * [ {  icon: 'fas fa-plus' } ]
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts b/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
index d9ee0d11b..12562b0d5 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-label/po-table-column-label.interface.ts
@@ -75,10 +75,14 @@ export interface PoTableColumnLabel {
    * - <span class="po-icon po-icon-close"></span> - `danger`
    * - <span class="po-icon po-icon-info"></span> - `info`
    *
-   * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-tag p-icon="po-icon-user" p-value="PO Tag"></po-tag>
    * ```
+   *  Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
+   * ```
    * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-tag p-icon="fa fa-podcast" p-value="PO Tag"></po-button>
diff --git a/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts b/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
index 2d8145b62..ca63899bf 100644
--- a/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
+++ b/projects/ui/src/lib/components/po-tag/po-tag-base.component.ts
@@ -242,10 +242,14 @@ export class PoTagBaseComponent {
    * - <span class="po-icon po-icon-close"></span> - `danger`
    * - <span class="po-icon po-icon-info"></span> - `info`
    *
-   * Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** Também É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-tag p-icon="po-icon-user" p-value="PO Tag"></po-tag>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
+   * ```
    * como também utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-tag p-icon="fa fa-podcast" p-value="PO Tag"></po-button>
diff --git a/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts b/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
index 2f76b3803..fcfc0a7df 100644
--- a/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
+++ b/projects/ui/src/lib/components/po-toolbar/po-toolbar-base.component.ts
@@ -28,10 +28,14 @@ export class PoToolbarBaseComponent {
    *
    * Define um [ícone](/guides/icons) para a propriedade `p-actions`.
    *
-   * É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
+   * **Deprecated v20.x.x.** É possível usar qualquer um dos ícones da [Biblioteca de ícones](/guides/icons). conforme exemplo abaixo:
    * ```
    * <po-toolbar p-actions-icon="po-icon-user" [p-actions]="actions"></po-toolbar>
    * ```
+   * Utilize os ícones disponíveis na Lib [Phosphor](/guides/icons), conforme exemplo:
+   * ```
+   * <po-tag p-icon="ph ph-user" p-value="PO Tag"></po-button>
+   * ```
    * Também é possível utilizar outras fontes de ícones, por exemplo a biblioteca *Font Awesome*, da seguinte forma:
    * ```
    * <po-toolbar p-actions-icon="far fa-comment-alt" [p-actions]="actions"></po-toolbar>