Google Material Symbols plugin

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.

@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.

@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.

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.

Hi, have there been any updates to the problem since then? I want to keep using material symbols but am stuck not able to swap icons.

Just adding to this. I noticed if you create a component such as a button in your library with an icon from the material symbols plug, the plugin recognises the icon even when you add the button from your assets to a new project.

I tried this earlier and the plugin will highlight the icon, so the plugin knows which icon is selected. I changed the weight of the icons in material symbols, then selected the icon in the button and the plugin swapped back to the corresponding weight and icon.

Hopefully they can get this working one day

I made a native mobile app design kit and instead of using icon components I made a frame in each component that held an icon glyph from font awesome. The components with icons are then able to be updated as you would any text. If there were a way to update material icons with this plugin in a similar way, at least for representation sake in Figma, then that would be very powerful.

From what I can see online this has been asked time and time again.

The benefits of using the plugin is the symbols will always be up to date. The controls on the plugin are nice and I admit, using ALL the symbols seem highly unlikely. But if you are building a design system, and putting an icon on a component like with most people the first component is usually a button with an icon. That icon can often change and having to create a specific icon component every time seems backwards.

My only work around which isn’t nearly as nice to use, is download the material font, use it in a similar way to font awesome, create a component, add a text label, then when using that icon you need to find the text code to update the icon. But then I run into the problem again that when google update their icons/font I will have to do this all manually again.

The idea of iterative design is to make things better, it feels like we’re making slower clunkier workflows from my perspective.