Icons with the wrong icon_set

Developer Support CMS Development
1

Hello Community! :waving_hand:
I’m building a module that includes an icon field and despite having fontawesome-6.4.2 as the default icon_set, when I select certain icons I get the following error in the DOM (using ?hsDebug=true):
TemplateError{severity=FATAL, reason=SYNTAX_ERROR, item=OTHER, message=‘Error in `/my-theme/modules/navigation.module/module.html` on line 42: InterpretException: Can’t find icon ‘arrow up right dots’ in set ‘fontawesome-5.0.10’’, fieldName=‘null’, lineno=10, startPosition=1, scopeDepth=5, category=UNKNOWN, categoryErrors=null}

So I clearly see it’s trying to find the icon in the wrong icon_set, what I don’t understand is why the icon set is not correct :thinking:
This is the code used to display the icon:

{% icon

name=“{{module.tab_icon.name}}”,

style=“{{module.tag_icon.type}}”,

unicode=“{{module.tag_icon.unicode}}”,

icon_set=“{{module.tab_icon.icon_set}}”,

width=“20”,

height=“20”

%}

When I print the {{module.tab_icon.icon_set value alone}}, it shows the correct icon_set, so I’m not sure why it’s selecting a different icon_set when loading the icon.
Has anyone encountered a similar issue? It feels like just a simple thing yet it’s driving me crazy :expressionless_face:
Thank you!

2

@albertsg it looks like you have a typo in both your style and unicode values. “tag” instead of “tab”

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

3

OMG, thank you @BarryGrennan! Of course it had to be a typo, how come I didn’t see it! :joy:
Thanks for the attention to the detail!

4

Hey @albertsg,

Just tested it and it and can’t reproduce it…

153966iF60AF06A9779CAC9.png
153966iF60AF06A9779CAC9.png165×399 28.4 KB

This is my test module html setup

{# only for testing purposes #}
{{module.icon_field}}
{% if is_in_previewer %}
<style>
 .icon svg{
	width:24px;
 }
</style>
{% endif %}

{# the actual icon #}
<div class="icon">
 {% icon
	name="{{ module.icon_field.name }}"
	style="{{ module.icon_field.type }}"
	unicode="{{ module.icon_field.unicode }}"
	icon_set="{{ module.icon_field.icon_set }}"
 %}
</div>

And the output / preview

153967i1266EA18AFC82447.png

Personally, I’m using a custom setup when using FA icons as I’m using FA pro in all of my projects.

The setup is quite simple

fa-macro.html

{% macro fa_icon (weight, fa_name) %}
 <i class="{{weight}} fa-{{ fa_name|cut('fa-') }} custom-icon></i>
{% endmacro %}

in the modules

{% from 'PATH/TO/MACRO' import fa_icon %}

...
{% set icon_weight = module.style.icon.icon_weight %}
{% set icon = module.icon_name %}

...

{{ fa_icon(icon_weight, icon) }}

the icon_weight is a choice field with values like far, fal, fas… basically all available FA styles

The icon name is a text field so the user can just copy/paste the icon name into it

Way more control and easier to use.

best,

Anton

5

This is great, thanks for sharing @Anton! Really appreciate it :slightly_smiling_face: