Description
(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the
reduced test case.
I don't have a pro codepen account so I can't upload the svg as a static file but that doesn't change anything in the buttons not being aligned:
https://codepen.io/FabienTaillon-the-lessful/pen/NWLbXvR
Describe the issue. Is it a bug or a feature request (new component, new icon, new CSS class)?
All buttons are correctly horizontally aligned except the button icon one, which is lower than the others.
Is this issue related to a specific component, variant, and/or state? If so, please detail which.
button icon
Are any specific browsers impacted by this bug?
I tried with Chrome and Safari and issue happens in both.
Which version of the Salesforce Lightning Design System are you using?
2.20.1, but same for previous versions I tried.
What steps and/or code are needed to reproduce this issue?
<html>
<head>
<link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.min.css"/>
</head>
<body class="slds-m-around_large">
<button class="slds-button slds-button_neutral">Neutral Button</button>
<button class="slds-button slds-button_brand">Button</button>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Search">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
<span class="slds-assistive-text">Search</span>
</button>
</body>
</html>
What did you expect to happen?
All buttons are horizontally aligned.
What actually happened?
Button icon is lower than other buttons.