0

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?

0

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.

  • 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 at 21:38
  • My main issue, is that I still want to use the default icons they have. – BlondeSwan Mar 8 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 at 21:42
  • Okay, I'll mess around with it and see – BlondeSwan Mar 8 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.