function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SFDC_RichieSFDC_Richie 

Custom Flow Header Lightning Web Component - Get Icon Name via Flow

Hello folks,

I would like to use a custom header for my flow screens but I have an issue in declaring the "icon-name" attribute of the "lightning-icon"-tag via flow. Here is my code:
<template>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            {header}
        </h2>

        <!-- With an icon -->
        <div class="slds-p-around_medium lgc-bg">
            <lightning-tile label="Lightning component team" type="media">
                <lightning-icon slot="media" icon-name={tileIcon}></lightning-icon>
                <p class="slds-truncate" title="7 Members">{subTitle}</p>
            </lightning-tile>
        </div>
    </div>
</template>
import { LightningElement, api, track} from 'lwc';

export default class lwcTileHeaderFlowScreen extends LightningElement {

@api header;
@api subTitle; 
@api tileIcon;

}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>

    <!-- Description -->
    <masterLabel>Custom Tile Header</masterLabel>
    <description>Custom Tile component for flow screens</description>

    <!-- Component Availability -->
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

    <!-- Configuring the design attributes -->
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property   name="header" type="String" label="Header" description="Header text of tile"/>
            <property   name="subTitle" type="String" label="Sub Title" description="Sub title under header"/>
            <property   name="tileIcon" type="String" label="Tile Icon" description="Icon of the tile" default="standard:groups"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
User-added image

The flow user should be able to insert a custom icon name as input variable but the debugger is not showing the icon.

It only works if I hard code the variable with @track tileIcon = 'standard:groups'.

I played around with get and set withou success. Any hints would be appreciated.
Best Answer chosen by SFDC_Richie
SFDC_RichieSFDC_Richie
I found the issue:

For some reason its not allowed to set a default value for the icon name on the property. I got rid of it and now its works.