Emojis in Web Components - noi-techpark/opendatahub-docs GitHub Wiki

Problem

When integrating WebComponent with emojis, you might encounter an issue where emojis or icons do not display correctly.

Cause

This issue is typically caused by a character encoding problem. The default character set for HTML documents may not support the correct display of emojis and special icons, leading to rendering issues.

Solution

To ensure that emojis and icons render correctly, you need to explicitly set the character encoding to UTF-8. This can be done by including a <meta charset="UTF-8"> tag in the <head> section of your HTML document.

Example

Here's a simple HTML example that demonstrates how to correctly integrate the day-trip-map-widget with the proper character encoding:

Incorrect Integration (Emojis Not Displaying):

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://cdn.webcomponents.opendatahub.com/dist/137e4aa4-af69-4085-90be-b58299879cb4/day_trip_map_widget.min.js"></script>
</head>
<body>
    <day-trip-map-widget lang-and-locale="en-US" log-info="false"></day-trip-map-widget>
</body>
</html>

Correct Integration (Emojis Displaying Correctly):

Copy code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.webcomponents.opendatahub.com/dist/137e4aa4-af69-4085-90be-b58299879cb4/day_trip_map_widget.min.js"></script>
</head>
<body>
    <day-trip-map-widget lang-and-locale="en-US" log-info="false"></day-trip-map-widget>
</body>
</html>