Google Material Symbols plugin

I started using Material Symbols plugin for Figma which is really nice for a number of reasons. But it does not seem possible to swap icons in instances of components.

For example, I have a button component with text and an icon and I want to use an instance of this button in my design file but swap the icon to another one. Easy to do in the main component but I can’t figure out how to do it in the instance.

Am I doing something wrong? With Material Design icons this is not an issue, there is multiple ways of doing this.

Make sure you are using components and their instances correctly. Plugins don’t play any role in this.

I don’t see how this would be helpful at all. The Google Material Symbol plugin plays a major role in the issue I’m facing since I’m well aware of how to use components and instances but I’m new to this plugin.

The plugin simply adds bare vector icons to the design, next it’s your job to create components and use them as shown in the video.

2 Likes

@Sari_Taipale
Have you been able to achieve this?
I also am facing the issue of not being able to swap a 'Material Symbols" icon which is inside an instance.
I am able to swap the icon using the plugin when it isn’t inside a component/instance.

I think it’s due to the plugins behaviour which causes this lack of flexibility.

It’s not about the plugin. You need to turn icons into components and use the swap instance mechanic I linked above in order to be able to do that. Even if you added those icons without a plugin, you would need to do the same work.

1 Like

@Wouter2 Same here, haven’t solved this yet so we rolled back to using Material Design Icons in Figma. We use Material Symbols in code so we can still take advantage of the new features that Material Symbols offer.

@Gleb
I understand what you mean. I used to do that with another community-accessible icon library, also set as a library.
The nice thing about the plugin is that it’s constantly updated and I can visually search for new icons and select various weights. Exporting them all and putting them in a library or making components out of them is too much work

@Sari_Taipale
Thanks for your update.

This is very interesting to me. Do you find a plugin window/search more convenient than the assets panel? Also do you actually need all icons? Why not create components as you progress with your design?

Also in case you do need all of them, you can search the Community for files like this: Material Symbols as components | Figma Community, you don’t need to create all components yourself.

Using the assets panel is more convenient to work with. Especially when swapping an icon, this was also a must-have.
I like the flexibility of being able to change icon width and type (rounded, fill, outline, etc.) within the plugin because that isn’t as clear as it could be in the assets panel.
We use probably a dozen of icons, so that is not that much. But occasionally we do need new ones, which I like to grab from within the icon set.

But seeing that we can not swap an icon in a component with that plugin forces us to go back to what we had, which is the link you send me.

1 Like

Got it, thanks for the explanation!

For the plugin to be able to swap icons in a way you are describing, it would also have to create components in the current file, and then swap the current icon to the newly created component. I think creating a component yourself and then swapping the icon is not that much of a trouble, especially given that you, unlike a plugin, can create it in a separate file or replace an icon in the existing component with the new one. But I understand this may be a bit convoluted if you need quick iteration. In this case, if a plugin creates a new local component every time you use a new icon, would that be ok with you? If so, you can suggest this solution to the plugin developers. Or maybe you have other ideas on how this might work? I’m just curious from the plugins developer point of view.

From my perspective, I like the plugin to be as much integrated in the native Figma interactions as possible.
The plugin does not work great, but the possibilities it gives is nice. Like switching between types (sharp, rounded, fill, etc) and changing size. And when they add new icons, it’s automatically in the list. I believe this does not happen with sets you download from the community. You basically create a copy.
Is agree it’s better for the plugin developer/company to create all separate components and variant. This way the designer can add an icon to a component. Then in an instance the designer can swap any icon from the same library by using the default Figma behaviour.

1 Like