JS API 4.x ES modules: how to import watchUtils and Button?

Arpa_PiemonteGeoportal_Team

Hi,
when I used esri-loader, to import watchUtils and Button I wrote:

loadModules([
"dijit/form/Button",
"esri/core/watchUtils",
], options)
.then(([
Button,
watchUtils,
]) => {})

How can I do with ES modules?
I tried:

import Button from '@arcgis/dijit/form/Button';
import watchUtils from "@arcgis/core/watchUtils";

But it doesn't work.

Thanks for help.

Arpa_PiemonteGeoportal_Team

Ok, I think I solved both problems.
For watchUtils:

 

import * as watchUtils from '@arcgis/core/core/watchUtils.js';

 

 

For button the best solution is (this example put as icon the esri-icon-collection):

 

var element = document.createElement('div');
element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

If you are using ionic, you can put a ionic icon removing 'esri-icon-collection ' and adding a innerHTML, like;

 

var element = document.createElement('div');
element.className = "esri-widget--button esri-widget esri-interactive";
element.innerHTML = '<ion-icon name="expand"></ion-icon>'
element.addEventListener('click', function(evt){
  console.log("clicked"); 
})
view.ui.add(element, "top-right");

 

luckachi_0-1655389943966.png