Is there a way to use Material-UI icons or generic Material-UI components (e.g. Avatar) in IconLayer?

[ghost]

As mentioned in the title, can I use the Material UI icon imports in the IconLayer? I would like to leverage the performance of deck.gl by using IconLayer rather than using individual <Marker>s, which is what I did with react-map-gl previously.

Alternatively, can I use a Material UI icon or general React component? My goal is to display icons with dynamically-generated counts.

Thanks!

[Pessimistress]

use dynamic icon with IconLayer

use material icon with TextLayer

[ghost]

Hi, thanks for your reply! For the IconLayer, is there a way to use generic React components? For example, I would like to display the number of nodes in the cluster using something like <Avatar>1</Avatar>? If this were possible, I would be able to use their icons as well which are all exported as React components?

[Pessimistress]

Cross-posting my comment on #6078:

WebGL and React work in fundamentally different ways. The reason that WebGL is more performant is precisely because it is not rendered from a DOM tree. You seem to be implying that if the markers are rendered dynamically, then it'll use less resources than pre-generating them. This is false in the context of WebGL. If you want performance, then you need to give up some of the convenience that React grants you.

[ghost]

Hi, thanks for your reply on the issue as well as this discussion. For using dynamic icons with IconLayer, if I wish to use an already-created icon, do I then need to find the svg path for that particular icon and copy it into my code as per the provided example?

A big reason behind my preference to reuse React components (which I understand deck.gl is independent of React as per your comment on the issue) is that I'm working on an offline environment that has some packages already set up (React, Material UI, deckgl etc.), and transferring data over is not trivial.

I'm also not too sure regarding the best way to ask this as my concern is both achieving what I wish to now (using deck.gl for performance over solely using react-map-gl) as well as making it as easy to transition as possible, along with future-proofing in mind.

Thanks.

[Pessimistress]

If the question is whether you can use ANYTHING that React renders, then the generic answer is no. If you share an image of the kind of markers that you are trying to make, we can discuss the best approach to implement them.

do I then need to find the svg path for that particular icon and copy it into my code as per the provided example?

Don't use SVG if you want to use Material Icons. Follow the TextLayer example linked above. There is no advantage of using the SVG Material Icons versus using the web font.