diff --git a/src/components/ButtonIcon/ButtonIcon.jsx b/src/components/ButtonIcon/ButtonIcon.jsx
index 7c606425..714596b4 100644
--- a/src/components/ButtonIcon/ButtonIcon.jsx
+++ b/src/components/ButtonIcon/ButtonIcon.jsx
@@ -19,6 +19,7 @@ const ButtonIcon = ({
viewBox,
iconColor,
iconBackgroundColor,
+ text,
...props
}) => {
const { theme, themeName } = useTheme();
@@ -42,6 +43,7 @@ const ButtonIcon = ({
styles.buttonIcon,
disabled && styles.disabled,
loading && styles.loading,
+ text && styles.text,
className
)}
disabled={disabled}
@@ -50,12 +52,15 @@ const ButtonIcon = ({
{loading ? (
) : (
-
+ <>
+
+ {text && {text}}
+
)}
);
@@ -68,6 +73,7 @@ ButtonIcon.propTypes = {
disabled: PropTypes.bool,
onClick: PropTypes.func,
loading: PropTypes.bool,
+ text: PropTypes.string,
};
export default ButtonIcon;
diff --git a/src/components/ButtonIcon/styles.css b/src/components/ButtonIcon/styles.css
index 5eeabbf7..060ac334 100644
--- a/src/components/ButtonIcon/styles.css
+++ b/src/components/ButtonIcon/styles.css
@@ -16,6 +16,11 @@
box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.24);
}
+.buttonIcon.text:hover {
+ width: max-content;
+ padding-left: 0.4rem;
+}
+
.buttonIcon:active {
box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.24);
}
@@ -38,3 +43,14 @@
.loading {
pointer-events: none;
}
+
+.buttonIcon > span {
+ display: none;
+ margin: 0 1rem 0 0.6rem;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+}
+
+.buttonIcon:hover > span {
+ display: inline;
+}
diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
index 2649fcaf..abaa1e11 100644
--- a/src/components/Icon/Icon.jsx
+++ b/src/components/Icon/Icon.jsx
@@ -1064,6 +1064,266 @@ const icons = (type, backgroundColor, iconColor) => {
/>
),
+ privacy: (
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ ln: (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ trezor: (
+
+
+
+
+
+
+ ),
+ create: (
+
+
+
+
+ ),
+ restore: (
+
+
+
+
+ ),
+ watchOnly: (
+
+
+
+
+
+
+ ),
}[type];
};
export const IconWrapper = React.forwardRef(
diff --git a/src/docs/buttonicon.mdx b/src/docs/buttonicon.mdx
index aed0673a..c3b1e71c 100644
--- a/src/docs/buttonicon.mdx
+++ b/src/docs/buttonicon.mdx
@@ -74,3 +74,17 @@ import styles from "../css/base.css";
+
+### With text
+
+
+
+
+
+
+
diff --git a/src/docs/icon.mdx b/src/docs/icon.mdx
index 8d69750f..3bad2532 100644
--- a/src/docs/icon.mdx
+++ b/src/docs/icon.mdx
@@ -66,6 +66,12 @@ import { Icon, IconWrapper } from "../index";
+
+
+
+
+
+
## Sizes