1

I am trying to replicate lightning-button in my Web Component because I need to use custom colors, and supposedly you can't override the lightning-button with css to change these colors...

So here is what I've don't with my css:

.ytp-button {
    border-color: #5d5b51;
    border-width: 1px;
    color: #5d5b51;
    margin: 4px;
}

.ytp-button-title {
    margin: 4px;
}

.ytp-button-icon {
    fill: green;
    vertical-align: center;
}

and here is my html:

<button class="slds-button ytp-button" title="Download">
    <p class="ytp-button-title left">Download</p>
    <lightning-icon class="ytp-button-icon right" icon-name="utility:download" size="x-small"></lightning-icon>
</button>      

But my button is looking like this:

enter image description here

how can I manipulate the image to change it's fill color and align it in the center of the button?

Is there a better way to go about this?

1 Answer 1

2

You've basically fallen for the same problem as in your previous question. You can't control the "fill" of the component. CSS styles are applied to the component as a whole. Your basic choices are default, inverse, yellow, or red. However, in this case, there's good news. SVG support has been added to LWC, so you can use a custom SVG file and style it as you desire. Unfortunately, this appears to be the only way you can control the color of the icon. You can apply a background color, however, by using background-color on an element that contains your icon:

.ytp-button {
    border-color: #5d5b51;
    border-width: 1px;
    color: #5d5b51;
    background-color: green;
    margin: 4px;
}

For the alignment, place the icon inside the "p" element, or wrap everything inside a div; either way should resolve the alignment problem.

4
  • I was worried about that, but I tried doing <svg class="slds-icon slds-icon-text-default slds-icon_x-small ytp-button-icon left" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronleft"></use> </svg> Instead, but the image doesn't even load..
    – BlondeSwan
    Mar 8, 2019 at 21:38
  • My main issue, is that I still want to use the default icons they have.
    – BlondeSwan
    Mar 8, 2019 at 21:39
  • 1
    @BlondeSwan I don't have a decent answer other than to use your own. Note that SLDS in lightning is stored in /_slds/, not /assets/. I'm not sure if this is supported or if we should be using it, but that's the best I can come up with. The new CSS rules make things that used to be trivial difficult.
    – sfdcfox
    Mar 8, 2019 at 21:42
  • Okay, I'll mess around with it and see
    – BlondeSwan
    Mar 8, 2019 at 21:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .