diff --git a/src/vcf-enhanced-rich-text-editor-extra-icons.js b/src/vcf-enhanced-rich-text-editor-extra-icons.js
new file mode 100644
index 0000000..82f311d
--- /dev/null
+++ b/src/vcf-enhanced-rich-text-editor-extra-icons.js
@@ -0,0 +1,54 @@
+import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+
+`;
+
+document.head.appendChild(template.content);
diff --git a/src/vcf-enhanced-rich-text-editor-toolbar-styles.js b/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
index 713a523..c08793f 100644
--- a/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
+++ b/src/vcf-enhanced-rich-text-editor-toolbar-styles.js
@@ -63,16 +63,16 @@ documentContainer.innerHTML = `
[part~="toolbar-button-link"]::before,
[part~="toolbar-button-clean"]::before {
font-family: "vaadin-rte-icons", sans-serif;
- }
+ }
[part~="toolbar-button-align-justify"] iron-icon,
[part~="toolbar-button-align-left"] iron-icon,
[part~="toolbar-button-align-center"] iron-icon,
[part~="toolbar-button-align-right"] iron-icon,
[part~="toolbar-button-deindent"] iron-icon,
- [part~="toolbar-button-indent"] iron-icon {
- padding: 0.25em;
- box-sizing: border-box !important;
+ [part~="toolbar-button-indent"] iron-icon,
+ [part~="toolbar-button-readonly"] iron-icon {
+ --rte-extra-icons-stroke-color: var(--lumo-contrast-80pct);
}
[part~="toolbar-group"] {
diff --git a/src/vcf-enhanced-rich-text-editor.js b/src/vcf-enhanced-rich-text-editor.js
index f269716..1c706e4 100644
--- a/src/vcf-enhanced-rich-text-editor.js
+++ b/src/vcf-enhanced-rich-text-editor.js
@@ -22,6 +22,7 @@ import '@vaadin/vaadin-icons';
import './vendor/vaadin-quill';
import './vcf-enhanced-rich-text-editor-styles';
import './vcf-enhanced-rich-text-editor-toolbar-styles';
+import './vcf-enhanced-rich-text-editor-extra-icons';
import { ReadOnlyBlot, LinePartBlot, TabBlot, PreTabBlot, TabsContBlot, PlaceholderBlot } from './vcf-enhanced-rich-text-editor-blots';
const Quill = window.Quill;
@@ -238,26 +239,26 @@ Inline.order.push(PlaceholderBlot.blotName, ReadOnlyBlot.blotName, LinePartBlot.
@@ -289,7 +290,7 @@ Inline.order.push(PlaceholderBlot.blotName, ReadOnlyBlot.blotName, LinePartBlot.
diff --git a/theme/lumo/vcf-enhanced-rich-text-editor-styles.js b/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
index 750abb0..e2599cc 100644
--- a/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
+++ b/theme/lumo/vcf-enhanced-rich-text-editor-styles.js
@@ -132,6 +132,17 @@ const documentContainer = html`
[part~='toolbar-button-list-bullet']::before {
content: var(--lumo-icons-unordered-list);
}
+
+ [part~="toolbar-button-align-justify"] iron-icon,
+ [part~="toolbar-button-align-left"] iron-icon,
+ [part~="toolbar-button-align-center"] iron-icon,
+ [part~="toolbar-button-align-right"] iron-icon,
+ [part~="toolbar-button-deindent"] iron-icon,
+ [part~="toolbar-button-indent"] iron-icon,
+ [part~="toolbar-button-readonly"] iron-icon {
+ --rte-extra-icons-stroke-color: var(--lumo-contrast-60pct);
+ }
+
[part~='toolbar-button-blockquote']::before {
font-size: var(--lumo-font-size-xxl);
diff --git a/theme/material/vcf-enhanced-rich-text-editor-styles.js b/theme/material/vcf-enhanced-rich-text-editor-styles.js
index 0cd2650..3be65a5 100644
--- a/theme/material/vcf-enhanced-rich-text-editor-styles.js
+++ b/theme/material/vcf-enhanced-rich-text-editor-styles.js
@@ -81,6 +81,17 @@ const documentContainer = html`
font-size: 20px;
}
+ /* SVG extra icon set */
+ [part~="toolbar-button-align-justify"] iron-icon,
+ [part~="toolbar-button-align-left"] iron-icon,
+ [part~="toolbar-button-align-center"] iron-icon,
+ [part~="toolbar-button-align-right"] iron-icon,
+ [part~="toolbar-button-deindent"] iron-icon,
+ [part~="toolbar-button-indent"] iron-icon,
+ [part~="toolbar-button-readonly"] iron-icon {
+ --rte-extra-icons-stroke-color: var(--material-secondary-text-color);
+ }
+
/* TODO unsupported selector */
[part='content'] > .ql-editor {
padding: 0 16px;