how to add the 'external-link' symbol from feather icons to every external link in a menu?

[3muchfun]

I think it has to be paced in the config.json, but I do not neither know where nor how ...

[bobmitro]

The easiest way would be to manually add a shortcode for the external link, like this:

[fi=external-link] Your menu item

You can also use the Custom CSS tool to apply the following rule:

a[href^="http://"]:before, 
a[href^="https://"]:before {
  content: "url(path/to/your.svg);"
}

or

a[href^="http://"]:before, 
a[href^="https://"]:before {
  content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3e%3cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3e%3c/path%3e%3cpolyline points='15 3 21 3 21 9'%3e%3c/polyline%3e%3cline x1='10' y1='14' x2='21' y2='3'%3e%3c/line%3e%3c/svg%3e");
}

[3muchfun]

I added the 2nd CSS to the Custom CSS, and it works like a charm. To play with icon sizes I added
display: inline-block;
/* Adjust scale as necessary */
transform: scale(0.6);
to the code.
Thanks, Bob !

[3muchfun]

My solution in short terms:

1. Add the class external-link to menu items which leads to external sites
2. Add the following css to custom css in Publii:
   .external-link:after {
   content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3e%3cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3e%3c/path%3e%3cpolyline points='15 3 21 3 21 9'%3e%3c/polyline%3e%3cline x1='10' y1='14' x2='21' y2='3'%3e%3c/line%3e%3c/svg%3e");
   flex: 0 0 auto;
   transform: scale(0.6);
   margin-left: 4px;
   }
3. change the css to your needs
4. enjoy

Thanks for the other solution I got, but this is simple, and I understand it :-)