My objective is to design a button with multi-line text and an icon positioned centrally next to it for both lines. Refer to the screenshot below for clarification:
https://i.sstatic.net/ODPI2.png
Despite my efforts, I am encountering difficulty in centering the button. The icon consistently appears beside the first line of the button instead of the second.
Below is the code snippet for my button:
.btn {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
font-family: "Ubuntu", sans-serif;
font-weight: 600;
border: transparent;
padding: 6px 16px;
transition: background-color 100ms ease;
outline: none !important;
border-radius: 4px;
line-height: 28px;
background-color: #FBBC06;
font-size: 18px;
color: #022753;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}
.btn:before {
font-family: 'Material Icons';
content: 'shopping_cart';
font-feature-settings: 'liga';
font-size: 50px;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="btn">
<span>von günstigstem Anbieter<br> in den Warenkorb legen</span>
</button>The current alignment shows that the icon is only centered with the first line in the button, whereas I desire it to be vertically centered between both lines.
I have attempted to remove the span tags, but the outcome remains consistent.