Replace the lumo icon with custom icon

Hi guys I would like to change the content or rather the icon of the data-picker. It currently uses the lumo-style “content: var (- lumo-icons-calendar)” icon. I have created custom icons from the .js file and wish I could reference one of my icons. Anyone can give me some suggestions on how to do it?

Create a file vaadin-data-picker.css in frontend/themes//components

Then add this content:

[part='toggle-button']::before {
    content: <your icon>;

must be a font as far as i see

I’ve done this before but I can’t get the icon from the .js file. The file is the following:
` import ‘@polymer/iron-iconset-svg/iron-iconset-svg.js’;
const $_documentContainer = document.createElement(‘template’);

$_documentContainer.innerHTML = <iron-iconset-svg name="vaadin" size="16"> <svg><defs> <g id="search"><path d="M16.969 16.155l-4.932-4.932c0.9-1.089 1.44-2.484 1.44-4.005 0-3.474-2.826-6.3-6.3-6.3s-6.3 2.826-6.3 6.3c0 3.474 2.826 6.3 6.3 6.3 1.566 0 2.997-0.576 4.104-1.521l4.923 4.923c0.108 0.108 0.243 0.162 0.378 0.162s0.279-0.054 0.378-0.162c0.216-0.216 0.216-0.549 0.009-0.765zM7.186 12.438c-2.88 0-5.22-2.34-5.22-5.22s2.34-5.22 5.22-5.22 5.22 2.34 5.22 5.22-2.349 5.22-5.22 5.22z"/></g></defs></svg> </iron-iconset-svg>;

document.head.appendChild($_documentContainer.content); `

I think content can only be text

Is there a way to replace the lumo icon with my custom icon and then recall my icon id?

You can globally set the variable --lumo-icons-calendar
but it’s still text

So can I do it just by setting a url?

No the icon is a lumo icon font

message.txt (7.89 KB)

But what should I enter at this point? Can I enter my file ID?

–lumo-icons-calendar: “\ea0e”;

\ea0e is a charachter

in the font

but I want to change that.

Unfortunately you can’t use the iron/vaadin-iconset icons to replace the built-in icons in the components. You either need to convert them to an icon font, or use a CSS mask-image (a data URI with svg as the content).

Something like

vaadin-date-picker::part(toggle-button)::before {
  display: none;

vaadin-date-picker::part(toggle-button) {
  mask-image: url('data:image/svg+xml;utf8,<svg ...></svg>');

Do you have any links that I can follow?

Links to what? If you are asking for complete examples, no, I don’t have any ready-made.