When passing <slot name="success-mark"> to a child component, it is done as shown below:
<vue-dropzone ref="myVueDropzone"
id="dropzone"
:options="dropzoneOptions">
<slot name="success-mark"><i class="fa fa-trash"></i></slot>
</vue-dropzone>
The child component contains a function that returns the template which includes the provided slot:
setPreviewTemplate(){
return `
<div class="dz-preview dz-file-preview">
<div slot="image" class="dz-image" style="width: ${this.options.thumbnailWidth}px;height: ${this.options.thumbnailHeight}px">
<img slot="thumbnail" data-dz-thumbnail /></div>
<div slot="details" class="dz-details">
<div slot="size" class="dz-size"><span data-dz-size></span></div>
<div slot="name" class="dz-filename"><span data-dz-name></span></div>
</div>
<div slot="progress" class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div slot="error-message" class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark" slot="success-mark"><i class="fa fa-check"></i></div>
<div slot="error-mark" class="dz-error-mark"></div>
</div>
`;
}
Efforts have been made to change the slot - success-mark, however, without success.
Expected Outcome
The child component should display the icon of a trash can (fa fa-trash).
Actual Outcome
Despite attempts, the child component continues to show the default check icon (fa fa-check) instead of changing to the trash can icon.
Where could the issue lie?