Aller au contenu

Icon Buttons

Ce contenu n’est pas encore disponible dans votre langue.

You can add icons to your buttons using one of the following options.

Use a link wrapper (Oxygen) or div (Bricks), insert your SVG code using a code block (Oxygen) or a code element (Bricks). Add the o-btn class to the container. OxyProps will take care of styling the SVG as the button icon.

Structure of the button in Bricks.
Resulting markup
<a href="#" class="o-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24px"
height="24px"
>
<path
d="M11 17h2v-6h-2v6Zm1-8q.425 0 .713-.288T13 8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8q0 .425.288.713T12 9Zm0 13q-3.475-.875-5.738-3.988T4 11.1V5l8-3l8 3v6.1q0 3.8-2.263 6.913T12 22Z"
/>
</svg>
button
</a>

Browse the icon library of your choice and copy the URL of the icon you want to use. In this example, we will use the Iconify library.

Getting an icon from the Iconify Library.

Once you have found your icon:

  1. Click the SVG button.
  2. Click the SVG as data: URI button.
  3. Click the copy button to copy the code to your clipboard.

Create a custom CSS rule in your global CSS using the following model. This way, you insert the SVG code once and can reuse it without duplication.

[data-icon="icon-name"] {
--o_data-icon: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M11 17h2v-6h-2v6Zm1-8q.425 0 .713-.288T13 8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8q0 .425.288.713T12 9Zm0 13q-3.475-.875-5.738-3.988T4 11.1V5l8-3l8 3v6.1q0 3.8-2.263 6.913T12 22Z"%2F%3E%3C%2Fsvg%3E')
center / contain no-repeat;
}

Add the icon to the button by inserting an element with the data-icon attribute and the icon-name value. This can be a span or a div element.

<a href="#" class="o-btn">
<span data-icon="icon-name"></span>
button
</a>