diff --git a/api-generator/components/message.js b/api-generator/components/message.js
index 1f8795c89c..e3c8282ccc 100644
--- a/api-generator/components/message.js
+++ b/api-generator/components/message.js
@@ -34,6 +34,12 @@ const MessageProps = [
type: 'element',
default: 'null',
description: 'Template of the message.'
+ },
+ {
+ name: 'icon',
+ type: 'string',
+ default: 'Based on severity',
+ description: 'Icon for the message. If not set it will default to severity icon.'
}
];
diff --git a/components/doc/messages/index.js b/components/doc/messages/index.js
index f8fdaaa4ff..945c4ecba2 100644
--- a/components/doc/messages/index.js
+++ b/components/doc/messages/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
const MessagesDoc = memo(() => {
const sources = {
@@ -692,6 +692,12 @@ messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message',
null |
Template of the message. |
+
+ icon |
+ string |
+ based on severity |
+ Icon for the message. If not set it will default to severity icon. |
+
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 984b856090..75b2b357d1 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
export const Message = React.memo(
React.forwardRef((props, ref) => {
@@ -11,16 +11,20 @@ export const Message = React.memo(
}
const text = ObjectUtils.getJSXElement(props.text, props);
- const icon = classNames('p-inline-message-icon pi', {
- 'pi-info-circle': props.severity === 'info',
- 'pi-exclamation-triangle': props.severity === 'warn',
- 'pi-times-circle': props.severity === 'error',
- 'pi-check': props.severity === 'success'
- });
+ let iconValue = props.icon;
+ if (!iconValue) {
+ iconValue = classNames('pi', {
+ 'pi-info-circle': props.severity === 'info',
+ 'pi-exclamation-triangle': props.severity === 'warn',
+ 'pi-times-circle': props.severity === 'error',
+ 'pi-check': props.severity === 'success'
+ });
+ }
+ const icon = IconUtils.getJSXIcon(iconValue, { className: 'p-inline-message-icon' }, { props });
return (
<>
-
+ {icon}
{text}
>
);
@@ -60,6 +64,7 @@ Message.defaultProps = {
className: null,
style: null,
text: null,
+ icon: null,
severity: 'info',
content: null
};
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
index 2a14b75d40..c53202eb51 100644
--- a/components/lib/message/message.d.ts
+++ b/components/lib/message/message.d.ts
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { IconType } from '../utils/utils';
type MessageSeverityType = 'success' | 'info' | 'warn' | 'error';
@@ -10,6 +11,7 @@ export interface MessageProps extends Omit;
children?: React.ReactNode;
}
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
index 55d7afca43..dce0b9c066 100644
--- a/components/lib/messages/UIMessage.js
+++ b/components/lib/messages/UIMessage.js
@@ -1,11 +1,11 @@
import * as React from 'react';
import { useTimeout } from '../hooks/Hooks';
import { Ripple } from '../ripple/Ripple';
-import { classNames } from '../utils/Utils';
+import { classNames, IconUtils } from '../utils/Utils';
export const UIMessage = React.memo(
React.forwardRef((props, ref) => {
- const { severity, content, summary, detail, closable, life, sticky } = props.message;
+ const { severity, content, summary, detail, closable, life, sticky, icon } = props.message;
const [clearTimer] = useTimeout(
() => {
@@ -44,17 +44,21 @@ export const UIMessage = React.memo(
const createMessage = () => {
if (props.message) {
- const icon = classNames('p-message-icon pi ', {
- 'pi-info-circle': severity === 'info',
- 'pi-check': severity === 'success',
- 'pi-exclamation-triangle': severity === 'warn',
- 'pi-times-circle': severity === 'error'
- });
+ let iconValue = icon;
+ if (!iconValue) {
+ iconValue = classNames('pi', {
+ 'pi-info-circle': severity === 'info',
+ 'pi-exclamation-triangle': severity === 'warn',
+ 'pi-times-circle': severity === 'error',
+ 'pi-check': severity === 'success'
+ });
+ }
+ const iconContent = IconUtils.getJSXIcon(iconValue, { className: 'p-message-icon' }, { props });
return (
content || (
<>
-
+ {iconContent}
{summary}
{detail}
>
diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
index 15adc00139..97d48f4bd1 100644
--- a/components/lib/messages/messages.d.ts
+++ b/components/lib/messages/messages.d.ts
@@ -1,5 +1,6 @@
import * as React from 'react';
import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils/utils';
type MessagesSeverityType = 'success' | 'info' | 'warn' | 'error';
@@ -13,6 +14,7 @@ export interface MessagesMessage {
closable?: boolean;
sticky?: boolean;
life?: number;
+ icon?: IconType;
}
export interface MessagesProps extends Omit, HTMLDivElement>, 'ref'> {