How do I include an SVG within a button tag, using Phoenix.HTML.Form and the submit tag?

You can use do/end blocks instead of string labels for many html functions:

As a supplyment, it’s better to manage svg image with some helpers. Or, it will interfere with your view.

When I try this code:

<%= submit "Log in" do %>
    <svg>
        ETC
    </svg>
<% end %>

I get the error undefined function submit/3

I guess that adding the do...end is like adding a third argument. So I guess submit/2 exists but submit/3 does not?

Skip the "Log in". It can be either text or a do/end block.

Currently I pass information to the submit form helper so that I can style the button by setting the class.

<%= submit "Log in", class: "styling" %>

How can I set the class on the button if I jump directly into the do-end block?

Also, under what scenario do I gain a big advantage from using this submit helper from Phoenix.HTML.Form? It seems to me like it doesn’t really help much – it seems like different syntax for saying the same thing and I’m getting no magic lifting happening for me behind the scenes.

The button text (or other content) just gets placed inside the do-end block:

<%= submit class: "styling" do %>
  "Log In"
<% end %>

In this case "Log In" could be replaced with your <svg />.

Have a look at Phoenix.HTML.Tag.content_tag/2/3 to get a better understanding of how this works.

Thanks!!

In a Phoenix Liveview leex file, I reference an SVG in the button tag, then use CSS to style the button shape/color and the SVG attributes, such as position. Also, the button is disabled if the associated input field value is blank.

                  <button class="post_send_button" type="submit" name="submit" <%= if @post == "" do %>disabled="disabled"<% end %>>
                    <img class="send_img" src="<%= Routes.static_path(@socket, "/images/icons/send_white.svg") %>"/>
                  </button>

Following is CSS that renders a round button with the SVG centered, and to the right side of the associated input assigned a class value of post_send:

.post_send {
  display: flex;
  padding-bottom: 1.0rem;
}

.post_send_button {
  border-radius: 16px;
  height: 32px !important;
  width: 32px;
  margin-left: 0.3rem;
  margin-bottom: 0px;
  padding: 0px;
}

.send_img {
  height: 18px;
  width: 21px;
  margin: 0px;
  line-height: 0px !important;
  position: relative;
  left: -1px;
  top: 2px;
}