How to customize LayerList icon

[yangwen]

Our design calls for specific designed controls to toggle the feature layers in our map.  As such I need to customize the LayerList widget with specific markup for rendering.

From what I saw in the 4.x JS API, there doesn't seem to be a method or property where I can overwrite the markup of the layerlist widget.  Is this correct? How can I otherwise achieve what I described?

Thanks.

[MattDriscoll]

Hi Kevin! I'm glad you found the presentations helpful

Here's the demo code for the extended scalebar widget. You can find all the code you need there.

dev-summit-2020-customizing-widgets/demos at master · jcfranco/dev-summit-2020-customizing-widgets ·... 

Let me know if that's what you were looking for.

-Matt

[Anonymous User]

Matt Driscoll‌ sweet! Thanks. I am looking at it and appreciate the step-by-step examples and comments. I always enjoy dev engineer presentations at the summit.

So.. I went to transpile and run the demoes, I got the following error from NPM.  I also attempted updating the API to 4.16 and running NCU (ncu -u then npm install), same results. Thoughts? I'll keep studying the new scaffolding you are using but should this work out of the box when downloaded and npm installed?

C:\Users>cd..
C:\>cd devsum
C:\devSum>npm install
> dev-summit-2020-customizing-widgets@1.0.0 postinstall C:\devSum
> tsc
node_modules/@types/chai/index.d.ts:840:49 - error TS2304: Cannot find name 'ReadonlySet'.
840 include<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:840:66 - error TS2304: Cannot find name 'ReadonlyMap'.
840 include<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:850:45 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
850 include<T extends object>(haystack: WeakSet<T>, needle: T, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:879:52 - error TS2304: Cannot find name 'ReadonlySet'.
879 notInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:879:69 - error TS2304: Cannot find name 'ReadonlyMap'.
879 notInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:889:48 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
889 notInclude<T extends object>(haystack: WeakSet<T>, needle: T, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:920:53 - error TS2304: Cannot find name 'ReadonlySet'.
920 deepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:920:70 - error TS2304: Cannot find name 'ReadonlyMap'.
920 deepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:930:55 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
930 deepInclude<T>(haystack: T, needle: T extends WeakSet<any> ? never : Partial<T>, message?: string): void;
 ~~~~~~~
node_modules/@types/chai/index.d.ts:951:56 - error TS2304: Cannot find name 'ReadonlySet'.
951 notDeepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:951:73 - error TS2304: Cannot find name 'ReadonlyMap'.
951 notDeepInclude<T>(haystack: ReadonlyArray<T> | ReadonlySet<T> | ReadonlyMap<any, T>, needle: T, message?: string): void;
 ~~~~~~~~~~~
node_modules/@types/chai/index.d.ts:961:58 - error TS2583: Cannot find name 'WeakSet'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
961 notDeepInclude<T>(haystack: T, needle: T extends WeakSet<any> ? never : Partial<T>, message?: string): void;
 ~~~~~~~

Found 12 errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! dev-summit-2020-customizing-widgets@1.0.0 postinstall: `tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the dev-summit-2020-customizing-widgets@1.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\kmacleod\AppData\Roaming\npm-cache\_logs\2020-07-31T15_14_57_864Z-debug.log
C:\devSum>ncu
Checking C:\devSum\package.json
[====================] 7/7 100%
@types/arcgis-js-api ~4.14.0 → ~4.16.0
 grunt ~1.0.4 → ~1.2.1
 prettier ~1.19.1 → ~2.0.5
 typescript ~3.8.3 → ~3.9.7
Run ncu -u to upgrade package.json
C:\devSum>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[NilsBabel1]

Did you ever get this working?  I would like to get the checkboxes instead of the eyeball as well.  I'm using the github styler too to try and create my own theme.  I'm not able to override the css like you mentioned previously.  I think the way my css loads when our application builds ignores the override.  I've gone down the same path as you with the LayerList.scss.  But I found out that the icons is actually stored in the icons/style.scss.  There's also a variables.scss there that style imports that lists $esri-icon-visible.  So in my-theme/main.scss I've tried to do this:

@import "../base/icons/style.scss";

$esri-icon-visible: "\e611";

$esri-icon-non-visible: "\e610";

I've also tried \ue611 with and without quotes.  And also not importing the style file.  But it still doesn't work.  I get a variety of different font errors.  I feel like this is on the right track but it's not quite there.

Any advice Juan Carlos Franco‌ Matt Driscoll‌ ?