I was able to get the Challenge Yourself completed, but there is no 'divide' icon to use. Tried adding a custom icon (PNG or SVG) to the <c-button></c-button> multiple different ways:
<c-button .... icon={iconPNG}></c-button>and
<c-button ....> <img src={iconPNG} class="slds-button__icon_small" key={factor}/></c-button>amongst others, but to no avail.
The reference to {iconPNG} is correct as it works outside of the "factors" for:each loop:
<img src={iconPNG} class="slds-button__icon_small"/>but never works within the button frame. There are no utility:divide, utility:division or utility:slash icons and I even tried rotating the utility:dash 45° with CSS, but wasn't able to get that to show up either.
It would also behoove to remove the zero from the list... so I created divFactors in the js:
divFactors = this.factors.slice(1);
#Trailhead Challenges
Hi @Eric Tarasewicz - If you already added <slot></slot> inside c-button.html and you want to use slot content instead of a label, then you would stop using the label attribute
and put the text inside the tags. But the object-label approach above is the simplest and matches what you already have.
Easiest way -
Built your display label in JS
get divFactors() { return this.factors .filter(n => n !== 0) .map(n => ({ value: n, label: `÷ ${n}` }));}and use it in template
<template for:each={divFactors} for:item="item"> <c-button key={item.value} label={item.label} data-factor={item.value} onclick={handleDivide}> </c-button></template>
