Component Builder Headline Parameters

[GregoryArndt]

Good day Themeco Team!

Apologies in advance if this is a newbie question. I am trying to learn how to use Components and followed the doc guide and video to create my own button component. I have even been able to get the link target parameter to work as suggested in this post: Feature request: Component parameter checkboxes

All is working well except I would like to know how to dynamically set the icon in the headline element of the button. I have already added the icon parameter and the icon selection is showing when I add the component to the page. What I can’t figure out is how to dynamically change the icon based on the icon parameter. I tried something similar to the target choice as per the post above by adding a custom attribute to the headline but I don’t think I am getting the name right. I tried ‘icon’ and ‘x-gaphic-primary’ (based on inspecting the page), but these don’t work.

Can you tell me the proper name for the custom attribute to dynamically change the headline icon? Or am I going about this all wrong?

One other thing is I’d like to add a parameter to change the size of the text and icon in the headline. Would I just create a text parameter and add the dynamic content to the ‘Font Size’ option entry? Or would I add the dynamic parameter to the ‘Weight’ option.

Here are the creds for the site https://artistryware.com/:

[stilemas]

Not sure if we’re talking about the same thing here, but I had some difficulty finding where to place the parameter for an icon in buttons.

After digging around the forum, I found these steps. Maybe they can help you?

1. Turn on “Breakout Mode”
   a. From the Cornerstone editor, click the “Cornerstone” logo on the top left
   b. Click the settings gear icon on the bottom left
   c. Click the “Tools” tab
   d. Set “Breakout Mode” to “True”

This should allow you to see and set parameters to nearly any type of element attribute.

2. Select your element
3. Locate the “Icon” field and drop your parameter tag in there.

Screenshot attached for reference.

[GregoryArndt]

Hi @stilemas,

Thank you so much for the help. That worked!

For setting breakout mode, you missed a step or two. Here it is for others:

1. Turn on “Breakout Mode”
   a. From the Cornerstone editor, click the “Cornerstone” logo on the top left
   b. Click the settings gear icon on the bottom left
   c. Click the ‘Dev Toolkit’ checkbox
   d. Click the drill icon in the lower right of the editor
   e. Click the “Tools” tab
   f. Set “Breakout Mode” to “True”

Once the component has been updated with the parameter, you can turn off breakout mode.

[ruenel]

Hey @GregoryArndt,

It is good to know that you have resolved your issue already.

@stilemas, Thanks for chiming in!

Best Regards.