diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
index 95392e1330..af34543b1a 100644
--- a/src/components/accordion/Accordion.d.ts
+++ b/src/components/accordion/Accordion.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type AccordionTabHeaderTemplateType = React.ReactNode | ((props: AccordionTabProps) => React.ReactNode);
 
@@ -27,8 +28,8 @@ export interface AccordionProps {
     className?: string;
     style?: object;
     multiple?: boolean;
-    expandIcon?: string;
-    collapseIcon?: string;
+    expandIcon?: IconType<AccordionProps>;
+    collapseIcon?: IconType<AccordionProps>;
     transitionOptions?: object;
     onTabOpen?(e: AccordionEventParams): void;
     onTabClose?(e: AccordionEventParams): void;
diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
index b8e9951865..002057e3ba 100644
--- a/src/components/accordion/Accordion.js
+++ b/src/components/accordion/Accordion.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { classNames, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { classNames, ObjectUtils, IconUtils, UniqueComponentId } from '../utils/Utils';
 import { CSSTransition } from '../csstransition/CSSTransition';
 
 export class AccordionTab extends Component {
@@ -48,8 +48,8 @@ export class Accordion extends Component {
         className: PropTypes.string,
         style: PropTypes.object,
         multiple: PropTypes.bool,
-        expandIcon: PropTypes.string,
-        collapseIcon: PropTypes.string,
+        expandIcon: PropTypes.any,
+        collapseIcon: PropTypes.any,
         transitionOptions: PropTypes.object,
         onTabOpen: PropTypes.func,
         onTabClose: PropTypes.func,
@@ -134,11 +134,12 @@ export class Accordion extends Component {
         const ariaControls = this.state.id + '_content_' + index;
         const tabIndex = tab.props.disabled ? -1 : null;
         const header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : <span className="p-accordion-header-text">{tab.props.header}</span>;
+        const icon = selected ? this.props.collapseIcon : this.props.expandIcon;
 
         return (
             <div className={tabHeaderClass} style={tab.props.headerStyle}>
                 <a href={'#' + ariaControls} id={id} className="p-accordion-header-link" aria-controls={ariaControls} role="tab" aria-expanded={selected} onClick={(event) => this.onTabHeaderClick(event, tab, index)} tabIndex={tabIndex}>
-                    <span className={iconClassName}></span>
+                    {IconUtils.getJSXIcon(icon, {className: iconClassName}, this.props)}
                     {header}
                 </a>
             </div>
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index ee508fdd19..e30264c7ff 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 import { VirtualScrollerProps } from '../virtualscroller';
+import {IconType} from "../utils/Utils";
 
 type AutoCompleteOptionGroupTemplateType = React.ReactNode | ((suggestion: any, index: number) => React.ReactNode);
 
@@ -83,7 +84,7 @@ export interface AutoCompleteProps {
     itemTemplate?: AutoCompleteItemTemplateType;
     selectedItemTemplate?: AutoCompleteSelectedItemTemplateType;
     transitionOptions?: object;
-    dropdownIcon?: string;
+    dropdownIcon?: IconType<AutoCompleteProps>;
     onChange?(e: AutoCompleteChangeParams): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
index 227bfe024b..9d4c5394d1 100644
--- a/src/components/autocomplete/AutoComplete.js
+++ b/src/components/autocomplete/AutoComplete.js
@@ -112,7 +112,7 @@ export class AutoComplete extends Component {
         itemTemplate: PropTypes.any,
         selectedItemTemplate: PropTypes.any,
         transitionOptions: PropTypes.object,
-        dropdownIcon: PropTypes.string,
+        dropdownIcon: PropTypes.any,
         onChange: PropTypes.func,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
diff --git a/src/components/avatar/Avatar.d.ts b/src/components/avatar/Avatar.d.ts
index 47a95bb7a6..7239ebab9a 100644
--- a/src/components/avatar/Avatar.d.ts
+++ b/src/components/avatar/Avatar.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type AvatarSizeType = 'normal' | 'large' | 'xlarge';
 
@@ -8,7 +9,7 @@ type AvatarTemplateType = React.ReactNode | ((props: AvatarProps) => React.React
 
 export interface AvatarProps {
     label?: string;
-    icon?: string;
+    icon?: IconType<AvatarProps>;
     image?: string;
     size?: AvatarSizeType;
     shape?: AvatarShapeType;
diff --git a/src/components/avatar/Avatar.js b/src/components/avatar/Avatar.js
index 79384c4cb2..6419bfeb29 100644
--- a/src/components/avatar/Avatar.js
+++ b/src/components/avatar/Avatar.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ObjectUtils, classNames } from '../utils/Utils';
+import {ObjectUtils, classNames, IconUtils} from '../utils/Utils';
 
 export class Avatar extends Component {
 
@@ -20,7 +20,7 @@ export class Avatar extends Component {
 
     static propTypes = {
         label: PropTypes.string,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         image: PropTypes.string,
         size: PropTypes.string,
         shape: PropTypes.string,
@@ -38,7 +38,7 @@ export class Avatar extends Component {
         }
         else if (this.props.icon) {
             const iconClassName = classNames('p-avatar-icon', this.props.icon);
-            return <span className={iconClassName}></span>;
+            return IconUtils.getJSXIcon(this.props.icon, {className: iconClassName}, this.props);
         }
         else if (this.props.image) {
             const onError = (e) => {
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
index 1607a880f1..8f4e16ac83 100644
--- a/src/components/button/Button.d.ts
+++ b/src/components/button/Button.d.ts
@@ -1,19 +1,12 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import {IconType} from "../utils/Utils";
 
 type ButtonPositionType = 'top' | 'bottom' | 'left' | 'right';
 
-type ButtonIconType = React.ReactNode | ((options: ButtonIconOptions) => React.ReactNode);
-
-export interface ButtonIconOptions {
-    className: string;
-    element: React.ReactNode;
-    props: ButtonProps;
-}
-
 export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled'|'ref'> {
     label?: string;
-    icon?: ButtonIconType;
+    icon?: IconType<ButtonProps>;
     iconPos?: ButtonPositionType;
     badge?: string;
     badgeClassName?: string;
@@ -21,7 +14,7 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
     tooltipOptions?: TooltipOptions;
     disabled?: boolean;
     loading?: boolean;
-    loadingIcon?: ButtonIconType;
+    loadingIcon?: IconType<ButtonProps>;
 }
 
 export declare class Button extends React.Component<ButtonProps, any> { }
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index 714a869e28..97a9a49896 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
-import { ObjectUtils, classNames } from '../utils/Utils';
+import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
 import { tip } from '../tooltip/Tooltip';
 import { Ripple } from '../ripple/Ripple';
 
@@ -91,32 +91,16 @@ export class ButtonComponent extends Component {
 
     renderIcon() {
         let icon = this.props.loading ? this.props.loadingIcon : this.props.icon;
-        let content = null;
-
-        if (icon) {
-            let iconType = typeof icon;
-            let className = classNames('p-button-icon p-c', {
-                'p-button-loading-icon': this.props.loading,
-                [`${icon}`]: iconType === 'string',
-                'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
-                'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
-                'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
-                'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label,
-            });
-            content = <span className={className}></span>;
-
-            if (iconType !== 'string') {
-                const defaultContentOptions = {
-                    className,
-                    element: content,
-                    props: this.props
-                };
-
-                content = ObjectUtils.getJSXElement(icon, defaultContentOptions);
-            }
-        }
-
-        return content;
+        let iconType = typeof icon;
+        let className = classNames('p-button-icon p-c', {
+            'p-button-loading-icon': this.props.loading,
+            [`${icon}`]: iconType === 'string',
+            'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
+            'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
+            'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
+            'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label,
+        });
+        return IconUtils.getJSXIcon(icon, {className}, this.props);
     }
 
     renderLabel() {
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 625a78d3f4..5349e921e9 100644
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import {IconType} from "../utils/Utils";
 
 type CalendarAppendToType = 'self' | HTMLElement | undefined | null;
 
@@ -84,7 +85,7 @@ export interface CalendarProps {
     tabIndex?: number;
     placeholder?: string;
     showIcon?: boolean;
-    icon?: string;
+    icon?: IconType<CalendarProps>;
     showOnFocus?: boolean;
     numberOfMonths?: number;
     view?: string;
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
index 092a1bbeda..b03c573cf4 100644
--- a/src/components/calendar/Calendar.js
+++ b/src/components/calendar/Calendar.js
@@ -116,7 +116,7 @@ export class Calendar extends Component {
         tabIndex: PropTypes.number,
         placeholder: PropTypes.string,
         showIcon: PropTypes.bool,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         showOnFocus: PropTypes.bool,
         numberOfMonths: PropTypes.number,
         view: PropTypes.string,
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
index 2626e8e05c..8d5d4033b2 100644
--- a/src/components/checkbox/Checkbox.d.ts
+++ b/src/components/checkbox/Checkbox.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import {IconType} from "../utils/Utils";
 
 interface CheckboxChangeTargetOptions {
     type: 'checkbox';
@@ -33,7 +34,7 @@ export interface CheckboxProps {
     required?: boolean;
     readOnly?: boolean;
     tabIndex?: number;
-    icon?: string;
+    icon?: IconType<CheckboxProps>;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index 4fe24b6417..9e7e2c3a53 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -1,6 +1,6 @@
 import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
-import { classNames } from '../utils/Utils';
+import {classNames, IconUtils} from '../utils/Utils';
 import { tip } from '../tooltip/Tooltip';
 
 export class Checkbox extends Component {
@@ -44,7 +44,7 @@ export class Checkbox extends Component {
         required: PropTypes.bool,
         readOnly: PropTypes.bool,
         tabIndex: PropTypes.number,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         ariaLabelledBy: PropTypes.string,
@@ -181,7 +181,7 @@ export class Checkbox extends Component {
                              onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} readOnly={this.props.readOnly} required={this.props.required}/>
                 </div>
                 <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.isChecked()}>
-                    <span className={iconClass}></span>
+                    {IconUtils.getJSXIcon(this.props.icon, {className: iconClass}, this.props)}
                 </div>
             </div>
         )
diff --git a/src/components/chip/Chip.d.ts b/src/components/chip/Chip.d.ts
index 2ba644983b..d8648fc1ac 100644
--- a/src/components/chip/Chip.d.ts
+++ b/src/components/chip/Chip.d.ts
@@ -1,16 +1,15 @@
 import * as React from 'react';
-
-type ChipTemplateType = React.ReactNode | ((props: ChipProps) => React.ReactNode);
+import {IconType, TemplateType} from "../utils/Utils";
 
 export interface ChipProps {
     label?: string;
-    icon?: string;
+    icon?: IconType<ChipProps>;
     image?: string;
     removable?: boolean;
     removeIcon?: string;
     className?: string;
     style?: object;
-    template?: ChipTemplateType;
+    template?: TemplateType<ChipProps>;
     imageAlt?: string;
     onImageError?(event: React.SyntheticEvent): void;
     onRemove?(event: React.MouseEvent<HTMLElement>): void;
diff --git a/src/components/chip/Chip.js b/src/components/chip/Chip.js
index f6eefaaecc..590faa3e4d 100644
--- a/src/components/chip/Chip.js
+++ b/src/components/chip/Chip.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, ObjectUtils, IconUtils } from '../utils/Utils';
 
 export class Chip extends Component {
 
@@ -20,10 +20,10 @@ export class Chip extends Component {
 
     static propTypes = {
         label: PropTypes.string,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         image: PropTypes.string,
         removable: PropTypes.bool,
-        removeIcon: PropTypes.string,
+        removeIcon: PropTypes.any,
         className: PropTypes.string,
         style: PropTypes.object,
         template: PropTypes.any,
@@ -73,7 +73,7 @@ export class Chip extends Component {
         }
         else if (this.props.icon) {
             const iconClassName = classNames('p-chip-icon', this.props.icon);
-            content.push(<span key="icon" className={iconClassName}></span>);
+            content.push(IconUtils.getJSXIcon(this.props.icon, {key: "icon", className: iconClassName}, this.props));
         }
 
         if (this.props.label) {
@@ -82,7 +82,10 @@ export class Chip extends Component {
 
         if (this.props.removable) {
             const removableIconClassName = classNames('p-chip-remove-icon', this.props.removeIcon);
-            content.push(<span key="removeIcon" tabIndex={0} className={removableIconClassName} onClick={this.close} onKeyDown={this.onKeyDown}></span>);
+            content.push(IconUtils.getJSXIcon(this.props.removeIcon,
+                {key: "removeIcon", tabIndex: 0, className: removableIconClassName, onClick: this.close, onKeyDown: this.onKeyDown},
+                this.props,
+            ))
         }
 
         return content;
diff --git a/src/components/confirmdialog/ConfirmDialog.d.ts b/src/components/confirmdialog/ConfirmDialog.d.ts
index 161f547f83..55d7239c56 100644
--- a/src/components/confirmdialog/ConfirmDialog.d.ts
+++ b/src/components/confirmdialog/ConfirmDialog.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DialogProps } from '../dialog';
+import {IconType} from "../utils/Utils";
 
 type ConfirmDialogTemplateType = React.ReactNode | ((options: ConfirmDialogOptions) => React.ReactNode);
 
@@ -26,9 +27,9 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide'> {
     message?: ConfirmDialogTemplateType;
     rejectLabel?: string;
     acceptLabel?: string;
-    icon?: string;
-    rejectIcon?: string;
-    acceptIcon?: string;
+    icon?: IconType<ConfirmDialogProps>;
+    rejectIcon?: IconType<ConfirmDialogProps>;;
+    acceptIcon?: IconType<ConfirmDialogProps>;;
     rejectClassName?: string;
     acceptClassName?: string;
     appendTo?: ConfirmDialogAppendToType;
diff --git a/src/components/confirmdialog/ConfirmDialog.js b/src/components/confirmdialog/ConfirmDialog.js
index 34dee518af..19f2dcb7ca 100644
--- a/src/components/confirmdialog/ConfirmDialog.js
+++ b/src/components/confirmdialog/ConfirmDialog.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import {DomHandler, ObjectUtils, classNames, IconUtils} from '../utils/Utils';
 import { Dialog } from '../dialog/Dialog';
 import { Button } from '../button/Button';
 import { localeOption } from '../api/Api';
@@ -67,9 +67,9 @@ export class ConfirmDialog extends Component {
         message: PropTypes.any,
         rejectLabel: PropTypes.string,
         acceptLabel: PropTypes.string,
-        icon: PropTypes.string,
-        rejectIcon: PropTypes.string,
-        acceptIcon: PropTypes.string,
+        icon: PropTypes.any,
+        rejectIcon: PropTypes.any,
+        acceptIcon: PropTypes.any,
         rejectClassName: PropTypes.string,
         acceptClassName: PropTypes.string,
         appendTo: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
@@ -175,7 +175,7 @@ export class ConfirmDialog extends Component {
 
         return (
             <Dialog visible={this.state.visible} {...dialogProps} className={className} footer={footer} onHide={this.hide} breakpoints={this.props.breakpoints}>
-                <i className={iconClassName} />
+                {IconUtils.getJSXIcon(this.props.icon, {className: iconClassName}, this.props)}
                 <span className="p-confirm-dialog-message">{message}</span>
             </Dialog>
         );
diff --git a/src/components/confirmpopup/ConfirmPopup.d.ts b/src/components/confirmpopup/ConfirmPopup.d.ts
index ec4971db1c..1eb5d7fcfb 100644
--- a/src/components/confirmpopup/ConfirmPopup.d.ts
+++ b/src/components/confirmpopup/ConfirmPopup.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type ConfirmPopupTemplateType = React.ReactNode | ((options: ConfirmPopupOptions) => React.ReactNode);
 
@@ -23,9 +24,9 @@ export interface ConfirmPopupProps {
     message?: ConfirmPopupTemplateType;
     rejectLabel?: string;
     acceptLabel?: string;
-    icon?: string;
-    rejectIcon?: string;
-    acceptIcon?: string;
+    icon?: IconType<ConfirmPopupProps>;
+    rejectIcon?: IconType<ConfirmPopupProps>;
+    acceptIcon?: IconType<ConfirmPopupProps>;
     rejectClassName?: string;
     acceptClassName?: string;
     className?: string;
diff --git a/src/components/confirmpopup/ConfirmPopup.js b/src/components/confirmpopup/ConfirmPopup.js
index db2f314114..19af39c140 100644
--- a/src/components/confirmpopup/ConfirmPopup.js
+++ b/src/components/confirmpopup/ConfirmPopup.js
@@ -1,7 +1,14 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { DomHandler, ObjectUtils, classNames, ZIndexUtils, ConnectedOverlayScrollHandler } from '../utils/Utils';
+import {
+    DomHandler,
+    ObjectUtils,
+    classNames,
+    ZIndexUtils,
+    ConnectedOverlayScrollHandler,
+    IconUtils
+} from '../utils/Utils';
 import { Button } from '../button/Button';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { localeOption } from '../api/Api';
@@ -73,9 +80,9 @@ export class ConfirmPopup extends Component {
         message: PropTypes.any,
         rejectLabel: PropTypes.string,
         acceptLabel: PropTypes.string,
-        icon: PropTypes.string,
-        rejectIcon: PropTypes.string,
-        acceptIcon: PropTypes.string,
+        icon: PropTypes.any,
+        rejectIcon: PropTypes.any,
+        acceptIcon: PropTypes.any,
         rejectClassName: PropTypes.string,
         acceptClassName: PropTypes.string,
         className: PropTypes.string,
@@ -314,7 +321,7 @@ export class ConfirmPopup extends Component {
 
         return (
             <div className="p-confirm-popup-content">
-                <i className={iconClassName} />
+                {IconUtils.getJSXIcon(this.props.icon, {className: iconClassName}, this.props)}
                 <span className="p-confirm-popup-message">{message}</span>
             </div>
         );
diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
index d815d4fcd3..96ac6d7be8 100644
--- a/src/components/fileupload/FileUpload.d.ts
+++ b/src/components/fileupload/FileUpload.d.ts
@@ -1,10 +1,11 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type FileUploadModeType = 'basic' | 'advanced';
 
 interface FileUploadOptionsType {
     label?: string;
-    icon?: string;
+    icon?: IconType<FileUploadProps>;
     iconOnly?: boolean;
     className?: string;
     style?: object
diff --git a/src/components/fileupload/FileUpload.js b/src/components/fileupload/FileUpload.js
index b2d057a0b4..a9b3de50b2 100644
--- a/src/components/fileupload/FileUpload.js
+++ b/src/components/fileupload/FileUpload.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from '../button/Button';
 import { Messages } from '../messages/Messages';
 import { ProgressBar } from '../progressbar/ProgressBar';
-import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { DomHandler, ObjectUtils, IconUtils, classNames } from '../utils/Utils';
 import { Ripple } from '../ripple/Ripple';
 import { localeOption } from '../api/Api';
 
@@ -462,7 +462,7 @@ export class FileUpload extends Component {
             <span className={chooseClassName} style={style} onClick={this.choose} onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur} tabIndex={0}>
                 <input ref={(el) => this.fileInput = el} type="file" onChange={this.onFileSelect}
                     multiple={this.props.multiple} accept={this.props.accept} disabled={this.chooseDisabled()} />
-                <span className={chooseIconClassName}></span>
+                {IconUtils.getJSXIcon(icon, {className: chooseIconClassName}, this.props)}
                 {label}
                 <Ripple />
             </span>
@@ -599,7 +599,7 @@ export class FileUpload extends Component {
                 {this.hasFiles() ? this.state.files[0].name : chooseLabel}
             </span>
         );
-        const icon = <span className={iconClassName}></span>;
+        const icon = IconUtils.getJSXIcon(chooseOptions.icon, {className: iconClassName}, this.props);
 
         return (
             <div className={className} style={this.props.style}>
diff --git a/src/components/multistatecheckbox/MultiStateCheckbox.d.ts b/src/components/multistatecheckbox/MultiStateCheckbox.d.ts
index 75d4f89e14..9693117292 100644
--- a/src/components/multistatecheckbox/MultiStateCheckbox.d.ts
+++ b/src/components/multistatecheckbox/MultiStateCheckbox.d.ts
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import {IconType} from "../utils/Utils";
 
 type MultiStateCheckboxOptionsType = MultiStateCheckboxOption[] | any[];
 
 type MultiStateCheckboxIconTemplateType = React.ReactNode | ((options: MultiStateCheckboxIconTemplateParams) => React.ReactNode);
 
 interface MultiStateCheckboxOption {
-    icon: string;
+    icon: IconType<MultiStateCheckboxProps>;
     style: object;
     className: string;
     [key: string]: any;
diff --git a/src/components/scrolltop/ScrollTop.d.ts b/src/components/scrolltop/ScrollTop.d.ts
index e39705bb3c..49439830ce 100644
--- a/src/components/scrolltop/ScrollTop.d.ts
+++ b/src/components/scrolltop/ScrollTop.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type ScrollTopTargetType = 'window' | 'parent';
 
@@ -7,7 +8,7 @@ type ScrollTopScrollBehavior = 'auto' | 'smooth';
 export interface ScrollTopProps {
     target?: ScrollTopTargetType;
     threshold?: number;
-    icon?: string;
+    icon?: IconType<ScrollTopProps>;
     behavior?: ScrollTopScrollBehavior;
     className?: string;
     style?: object;
diff --git a/src/components/scrolltop/ScrollTop.js b/src/components/scrolltop/ScrollTop.js
index 9410b94b91..88bbdd8a5b 100644
--- a/src/components/scrolltop/ScrollTop.js
+++ b/src/components/scrolltop/ScrollTop.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { DomHandler, classNames, ZIndexUtils } from '../utils/Utils';
+import {DomHandler, classNames, ZIndexUtils, IconUtils} from '../utils/Utils';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Ripple } from '../ripple/Ripple';
 
@@ -21,7 +21,7 @@ export class ScrollTop extends Component {
     static propTypes = {
         target: PropTypes.string,
         threshold: PropTypes.number,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         behavior: PropTypes.string,
         className: PropTypes.string,
         style: PropTypes.object,
@@ -128,7 +128,7 @@ export class ScrollTop extends Component {
                 <CSSTransition nodeRef={this.scrollElementRef} classNames="p-scrolltop" in={this.state.visible} timeout={{ enter: 150, exit: 150 }} options={this.props.transitionOptions}
                     unmountOnExit onEnter={this.onEnter} onEntered={this.onEntered} onExited={this.onExited}>
                     <button ref={this.scrollElementRef} type="button" className={className} style={this.props.style} onClick={this.onClick}>
-                        <span className={iconClassName}></span>
+                        {IconUtils.getJSXIcon(this.props.icon, {className: iconClassName}, this.props)}
                         <Ripple />
                     </button>
                 </CSSTransition>
diff --git a/src/components/selectitem/SelectItem.d.ts b/src/components/selectitem/SelectItem.d.ts
index b6b7667559..a0ad068b6d 100644
--- a/src/components/selectitem/SelectItem.d.ts
+++ b/src/components/selectitem/SelectItem.d.ts
@@ -1,8 +1,10 @@
+import {IconType} from "../utils/Utils";
+
 export interface SelectItem {
     label?: string;
     value?: any;
     className?: string;
-    icon?: string;
+    icon?: IconType<SelectItem>;
     title?: string;
     disabled?: boolean;
 }
diff --git a/src/components/speeddial/SpeedDial.d.ts b/src/components/speeddial/SpeedDial.d.ts
index 043c58bd5c..82843fe841 100644
--- a/src/components/speeddial/SpeedDial.d.ts
+++ b/src/components/speeddial/SpeedDial.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
+import {IconType} from "../utils/Utils";
 
 type SpeedDialDirectionType = 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';
 
@@ -34,8 +35,8 @@ export interface SpeedDialProps {
     buttonTemplate?: SpeedDialButtonTemplateType;
     maskStyle?: object;
     maskClassName?: string;
-    showIcon?: string;
-    hideIcon?: string;
+    showIcon?: IconType<SpeedDialProps>;
+    hideIcon?: IconType<SpeedDialProps>;
     rotateAnimation?: boolean;
     onVisibleChange?(visible: boolean): void;
     onClick?(event: React.MouseEvent<HTMLElement>): void;
diff --git a/src/components/speeddial/SpeedDial.js b/src/components/speeddial/SpeedDial.js
index bea4194872..cd13b56561 100644
--- a/src/components/speeddial/SpeedDial.js
+++ b/src/components/speeddial/SpeedDial.js
@@ -51,8 +51,8 @@ export class SpeedDial extends Component {
         buttonTemplate: PropTypes.any,
         maskStyle: PropTypes.object,
         maskClassName: PropTypes.string,
-        showIcon: PropTypes.string,
-        hideIcon: PropTypes.string,
+        showIcon: PropTypes.any,
+        hideIcon: PropTypes.any,
         rotateAnimation: PropTypes.bool,
         onVisibleChange: PropTypes.func,
         onClick: PropTypes.func,
diff --git a/src/components/splitbutton/SplitButton.d.ts b/src/components/splitbutton/SplitButton.d.ts
index 6683e44bb0..3505dbbd88 100644
--- a/src/components/splitbutton/SplitButton.d.ts
+++ b/src/components/splitbutton/SplitButton.d.ts
@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
 import TooltipOptions from '../tooltip/tooltipoptions';
-
-type SplitButtonButtonTemplateType = React.ReactNode | ((props: SplitButtonProps) => React.ReactNode);
+import {IconType, TemplateType} from "../utils/Utils";
 
 type SplitButtonAppendToType = 'self' | HTMLElement | undefined | null;
 
 export interface SplitButtonProps {
     id?: string;
     label?: string;
-    icon?: string;
+    icon?: IconType<SplitButtonProps>;
     model?: MenuItem[];
     disabled?: boolean;
     style?: object;
@@ -20,9 +19,9 @@ export interface SplitButtonProps {
     appendTo?: SplitButtonAppendToType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    buttonTemplate?: SplitButtonButtonTemplateType;
+    buttonTemplate?: TemplateType<SplitButtonProps>;
     transitionOptions?: object;
-    dropdownIcon?: string;
+    dropdownIcon?: IconType<SplitButtonProps>;
     onClick?(event: React.MouseEvent<HTMLElement>): void;
     onShow?(): void;
     onHide?(): void;
diff --git a/src/components/splitbutton/SplitButton.js b/src/components/splitbutton/SplitButton.js
index 4245ac1a8a..67da5f893c 100644
--- a/src/components/splitbutton/SplitButton.js
+++ b/src/components/splitbutton/SplitButton.js
@@ -35,7 +35,7 @@ export class SplitButton extends Component {
     static propTypes = {
         id: PropTypes.string,
         label: PropTypes.string,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         model: PropTypes.array,
         disabled: PropTypes.bool,
         style: PropTypes.object,
@@ -48,7 +48,7 @@ export class SplitButton extends Component {
         tooltipOptions: PropTypes.object,
         buttonTemplate: PropTypes.any,
         transitionOptions: PropTypes.object,
-        dropdownIcon: PropTypes.string,
+        dropdownIcon: PropTypes.any,
         onClick: PropTypes.func,
         onShow: PropTypes.func,
         onHide: PropTypes.func
diff --git a/src/components/tag/Tag.d.ts b/src/components/tag/Tag.d.ts
index b776c68369..3495a942a9 100644
--- a/src/components/tag/Tag.d.ts
+++ b/src/components/tag/Tag.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {IconType} from "../utils/Utils";
 
 type TagSeverityType = 'success' | 'info' | 'warn' | 'error' | (string & {});
 
@@ -6,7 +7,7 @@ export interface TagProps {
     value?: React.ReactNode;
     severity?: TagSeverityType;
     rounded?: boolean;
-    icon?: string;
+    icon?: IconType<TagProps>;
     style?: object;
     className?: string;
 }
diff --git a/src/components/tag/Tag.js b/src/components/tag/Tag.js
index cdcba9410e..6eb7b41bfd 100644
--- a/src/components/tag/Tag.js
+++ b/src/components/tag/Tag.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { classNames } from '../utils/Utils';
+import {classNames, IconUtils} from '../utils/Utils';
 
 export class Tag extends Component {
 
@@ -17,7 +17,7 @@ export class Tag extends Component {
         value: PropTypes.any,
         severity: PropTypes.string,
         rounded: PropTypes.bool,
-        icon: PropTypes.string,
+        icon: PropTypes.any,
         style: PropTypes.object,
         className: PropTypes.string
     };
@@ -35,7 +35,7 @@ export class Tag extends Component {
 
         return (
             <span className={tagClassName} style={this.props.style}>
-                {this.props.icon && <span className={iconClass}></span>}
+                {this.props.icon && IconUtils.getJSXIcon(this.props.icon, {className: iconClass}, this.props)}
                 <span className="p-tag-value">{this.props.value}</span>
                 <span>{this.props.children}</span>
             </span>
diff --git a/src/components/togglebutton/ToggleButton.d.ts b/src/components/togglebutton/ToggleButton.d.ts
index bc7bf4ce0e..0d7ca71cff 100644
--- a/src/components/togglebutton/ToggleButton.d.ts
+++ b/src/components/togglebutton/ToggleButton.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import {IconType} from "../utils/Utils";
 
 type ToggleButtonIconPositionType = 'left' | 'right';
 
@@ -19,8 +20,8 @@ interface ToggleButtonChangeParams {
 
 export interface ToggleButtonProps {
     id?: string;
-    onIcon?: string;
-    offIcon?: string;
+    onIcon?: IconType<ToggleButtonProps>;
+    offIcon?: IconType<ToggleButtonProps>;
     onLabel?: string;
     offLabel?: string;
     iconPos?: ToggleButtonIconPositionType;
diff --git a/src/components/togglebutton/ToggleButton.js b/src/components/togglebutton/ToggleButton.js
index 1df46e7488..142ebf21cd 100644
--- a/src/components/togglebutton/ToggleButton.js
+++ b/src/components/togglebutton/ToggleButton.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import { classNames } from '../utils/Utils';
+import {classNames, IconUtils} from '../utils/Utils';
 import { tip } from '../tooltip/Tooltip';
 import { Ripple } from '../ripple/Ripple';
 
@@ -27,8 +27,8 @@ export class ToggleButton extends Component {
 
     static propTypes = {
         id: PropTypes.string,
-        onIcon: PropTypes.string,
-        offIcon: PropTypes.string,
+        onIcon: PropTypes.any,
+        offIcon: PropTypes.any,
         onLabel: PropTypes.string,
         offLabel: PropTypes.string,
         iconPos: PropTypes.string,
@@ -126,12 +126,13 @@ export class ToggleButton extends Component {
 
         const hasIcon = this.hasIcon();
         const label = this.getLabel();
+        const icon = this.props.checked ? this.props.onIcon : this.props.offIcon
 
         if (hasIcon) {
             iconClassName = classNames('p-button-icon p-c', {
                 'p-button-icon-left': this.props.iconPos === 'left' && label,
                 'p-button-icon-right': this.props.iconPos === 'right' && label
-            }, this.props.checked ? this.props.onIcon : this.props.offIcon);
+            }, icon);
         }
 
         return (
@@ -139,7 +140,7 @@ export class ToggleButton extends Component {
                 onClick={this.toggle} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyDown={this.onKeyDown}
                 tabIndex={!this.props.disabled && this.props.tabIndex} aria-labelledby={this.props.ariaLabelledBy}>
 
-                {hasIcon && <span className={iconClassName}></span>}
+                {hasIcon && IconUtils.getJSXIcon(icon, {className: iconClassName}, this.props)}
                 <span className="p-button-label">{label}</span>
                 <Ripple />
             </div>
diff --git a/src/components/treenode/TreeNode.d.ts b/src/components/treenode/TreeNode.d.ts
index 3df74a2b76..e67b5caa53 100644
--- a/src/components/treenode/TreeNode.d.ts
+++ b/src/components/treenode/TreeNode.d.ts
@@ -1,8 +1,10 @@
+import {IconType} from "../utils/Utils";
+
 export default interface TreeNode {
     key?: string | number;
     label?: string;
     data?: any;
-    icon?: string;
+    icon?: IconType<TreeNode>;
     children?: TreeNode[];
     style?: object;
     className?: string;
diff --git a/src/components/utils/ClassNames.js b/src/components/utils/ClassNames.js
index 0ea0ab49e7..1afd0ee143 100644
--- a/src/components/utils/ClassNames.js
+++ b/src/components/utils/ClassNames.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function classNames(...args) {
     if (args) {
         let classes = [];
@@ -12,7 +14,7 @@ export function classNames(...args) {
             if (type === 'string' || type === 'number') {
                 classes.push(className);
             }
-            else if (type === 'object') {
+            else if (type === 'object' && !React.isValidElement(className)) {
                 const _classes = Array.isArray(className) ? className : Object.entries(className).map(([key, value]) => !!value ? key : null);
 
                 classes = _classes.length ? classes.concat(_classes.filter(c => !!c)) : classes;
diff --git a/src/components/utils/IconUtils.js b/src/components/utils/IconUtils.js
new file mode 100644
index 0000000000..9db6164500
--- /dev/null
+++ b/src/components/utils/IconUtils.js
@@ -0,0 +1,24 @@
+import * as React from "react";
+import ObjectUtils from "./ObjectUtils";
+
+export default class IconUtils {
+    static getJSXIcon(icon, iconProps, parentProps) {
+        let content = null;
+        if (icon) {
+            let iconType = typeof icon;
+            content = <span {...iconProps}></span>;
+
+            if (iconType !== 'string') {
+                const defaultContentOptions = {
+                    iconProps: iconProps,
+                    element: content,
+                    props: parentProps
+                };
+
+                content = <span {...iconProps}>{ObjectUtils.getJSXElement(icon, defaultContentOptions)}</span>;
+            }
+
+        }
+        return content;
+    }
+}
diff --git a/src/components/utils/ObjectUtils.js b/src/components/utils/ObjectUtils.js
index 804c50b16f..8ec6e49d1e 100644
--- a/src/components/utils/ObjectUtils.js
+++ b/src/components/utils/ObjectUtils.js
@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 export default class ObjectUtils {
 
     static equals(obj1, obj2, field) {
diff --git a/src/components/utils/Utils.d.ts b/src/components/utils/Utils.d.ts
index 304af2756a..b755ef35f3 100644
--- a/src/components/utils/Utils.d.ts
+++ b/src/components/utils/Utils.d.ts
@@ -97,6 +97,10 @@ export declare class ObjectUtils {
     static isNotEmpty(value: any): boolean;
 }
 
+export declare class IconUtils {
+    static getJSXIcon(icon: IconType<any>, iconProps: React.HTMLProps<HTMLElement>, props: any): any;
+}
+
 export declare function UniqueComponentId(prefix?: string): string;
 
 export declare namespace ZIndexUtils {
@@ -106,3 +110,13 @@ export declare namespace ZIndexUtils {
     export function getBase(key: string): number;
     export function getCurrent(key: string): number;
 }
+
+export interface IconOptions<ParentProps> {
+    iconProps: React.HTMLProps<HTMLElement>;
+    element: React.ReactNode;
+    props: ParentProps;
+}
+
+export type IconType<ParentProps> = React.ReactNode | ((options: IconOptions<ParentProps>) => React.ReactNode);
+
+export type TemplateType<ParentProps> = React.ReactNode | ((props: ParentProps) => React.ReactNode);
diff --git a/src/components/utils/Utils.js b/src/components/utils/Utils.js
index c0094af49e..aed85f6f4d 100644
--- a/src/components/utils/Utils.js
+++ b/src/components/utils/Utils.js
@@ -4,7 +4,8 @@ import DomHandler from './DomHandler';
 import EventBus from './EventBus';
 import { mask } from './Mask';
 import ObjectUtils from './ObjectUtils';
+import IconUtils from './IconUtils';
 import UniqueComponentId from './UniqueComponentId';
 import { ZIndexUtils } from './ZIndexUtils';
 
-export { classNames, ConnectedOverlayScrollHandler, DomHandler, EventBus, mask, ObjectUtils, UniqueComponentId, ZIndexUtils };
+export { classNames, ConnectedOverlayScrollHandler, DomHandler, EventBus, FilterUtils, mask, ObjectUtils, IconUtils, UniqueComponentId, ZIndexUtils };