Button with an SVG

I would like to have a button with a custom SVG.

I could add HTML but then I can’t easily link it to a workflow.

I could use an Icon element but I want to use my own custom SVG icon, not the font awesome ones.

I could just use an image, but semantically it is a button and I want to be able to tab and see the button focus.

Any ideas?

Why don’t you use a button with custom css?

Ok that works. For anyone else that finds this:

  1. Add the Classify plugin so that you can add CSS classes to elements
    Classify Plugin | Bubble

  2. Add your class to the ID attribute of your button e.g.

{addClass: 'search-button clickable-element'}

(the clickable-element class gives the button the focus indicator)

  1. In Settings > SEO /metatags add your class style in the Script/meta tags in header. e.g.
<style>
.search-button {
    background-image: url(url-for-your-uploaded-svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 4px !important;
}
</style>

Which is all great and works but isn’t really “no-code”. I have quite often been asked to implement something that isn’t that complicated in regular web development, but can’t be done with OOTB bubble. There’s often a solution but its complicated and feels like a hack/workaround. Having to add !important to my CSS rules, for example.

There’s also often a plugin suggested as a solution, but I don’t really want to install random plugins to fix things.

Why don t you use an group element for the click, so you can trigger a workflow. And in there you load an html element with the svg code.

I think thats the best way in Bubble to use icons (with text together) in a button.

I use an option set named icons an in there i have all mine svg icons. And in the html element you choose the right icon from the option set. Very easy to use. With an find and replace you even van change the color from an svg icon.

1 Like