Add a flag icon for language in web content

Issue

Need to add language flag icon in web content

Environment

Liferay DXP 7.4

Resolution

Please note: The following information involves customizations or implementation ideas that are beyond the scope of Liferay Support. Please exercise appropriate discretion in the use of this information to choose to follow it.

Web content flag's icon is coming from an admin theme, like this <use href="http://localhost:8080/o/admin-theme/images/clay/icons.svg#en-us"></use>. Hence, to apply others' flag icons, user needs to override the admin theme.

Please find the following steps to add a language flag icon:

1. Run this command to create a custom admin-theme: yo liferay-theme:admin
2. Navigate to src/images/clay/icons.svg (Open this file in a text editor)
3. Add below inside <SVG> tag:

<symbol id="gu-in" viewBox="0 0 512 512"><rect y="64" fill="#C0CFD8" width="512" height="384"></rect><rect x="16" y="80.3" fill="#F5984C" width="480" height="112"></rect><rect x="16" y="320" fill="#75BD4A" width="480" height="112"></rect><rect x="16" y="192" fill="#FFFFFF" width="480" height="128"></rect><circle fill="#0035A0" cx="256" cy="256" r="40"></circle></symbol>

4. Copy the Indian flag icon in this same folder, and rename it as flags-gu-IN.svg
5. Now, build created theme:gulp build
6. Deploy the created theme and navigate to Control Panel > Instance Settings > Instance Configuration and change Default Control Panel Theme.

Please find the steps to apply the language:

1. Open web.xml and paste the following:

<url-pattern>/gu/c/portal/protected</url-pattern>
<url-pattern>/gu-IN/c/portal/protected</url-pattern>
<url-pattern>/gu_IN/c/portal/protected</url-pattern>

2. Open shielded-container-web.xml and paste the following:

<servlet-mapping>
		<servlet-name>I18n Servlet</servlet-name>
		<url-pattern>/gu/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>I18n Servlet</servlet-name>
		<url-pattern>/gu-IN/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>I18n Servlet</servlet-name>
		<url-pattern>/gu_IN/*</url-pattern>
	</servlet-mapping>

3. Open portal-ext.properties and add gu-in in the below properties:

locales=gu_IN
locales.enabled=gu_IN

4. Restart the server after clearing temporary directories.
5. Navigate to Instance Settings > Localization > Drag & Drop 'Gujarat' from Available to Current.
6. Navigate to Content & Data > Web Content > Create Basic Web Content > Click on Flag Icon.
Results: Flag Icon appears on the gu-IN language.
Theme attached (https://drive.google.com/file/d/1sUkvVxUI2U_OMtaLuswbiROEdr6JDAtf/view?usp=drive_link)