How to add custom icon in liferay clay?

[jogHar]

I want to add a WhatsApp icon in Liferay and use clay UI then how to add WhatsApp icon in clay with Liferay.

<clay:link
   buttonStyle="outline-secondary"
   elementClasses="btn-monospaced btn-outline-borderless btn-sm lfr-portal-tooltip"
   href="#link"
   icon="phone"
   title="title"
/>

[matuzalemsteles]

Hey @jogHar, Taglibs are limited to using Clay's spritemap, only those that are available https://clayui.com/docs/components/icon.html. But you can use HTML markup and add your icon and still maintain the UI.

@jbalsas I'm not sure, but can we rewrite the taglib spritemap?

[jogHar]

I was try using below code, but that throws error like 'PWC6239: According to TLD, tag clay:link must be empty'

<clay:link
   buttonStyle="outline-secondary"
   elementClasses="btn-monospaced btn-outline-borderless btn-sm lfr-portal-tooltip"
   href="#link"
   icon="phone"
   title="title"
>
   <img src="/wp_icon.png"/>
</clay:link>

[matuzalemsteles]

@jogHar yeah this is not possible label is used instead but I think you can not pass an HTML markup to it, you would have to do something similar considering its markup above.

<a href="#link" class="btn-monospaced btn-outline-borderless btn-sm lfr-portal-tooltip">
  <img src="/wp_icon.png"/>
</a>

[pat270]

Just want to clarify, elements inside ClayLink are currently not possible in JSP's because of https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-taglib/frontend-taglib-clay/src/main/java/com/liferay/frontend/taglib/clay/servlet/taglib/LinkTag.java taglib. It's not related to code on this repo.

The icon attribute accepts the name of any SVG icon from https://clayui.com/docs/components/icon.html. You can't add image files to the SVG spritemap.

We haven't provided a way to add custom files in our SVG spritemap. The way to hack it, if you're using https://github.com/liferay/liferay-js-themes-toolkit/tree/master/packages/liferay-theme-tasks, is to copy icons.svg from build/images/clay/icons.svg and duplicate the file in src/images/clay/icons.svg. You can add your custom SVG to that file using something like:

<symbol id="a-unique-id" viewBox="0 0 512 512">
  <circle class="lexicon-icon-outline" cx="256" cy="256" r="256"></circle>
</symbol>

You can render it in your JSP with:

<clay:icon
  symbol="a-unqiue-id"
/>

One note, overwriting icons.svg in your theme will prevent any icon updates from Clay CSS from appearing, just remember to keep the files in sync if it matters to you.

[pat270]

The other way to make it work is to use your image as a background-image in CSS instead of using the img tag. Add your image in your theme to src/images/wp-icon.png and in _custom.scss:

.wp-icon {
  background-image: url(../images/wp-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
}

In your JSP:

<clay:link
   buttonStyle="outline-secondary"
   elementClasses="btn-monospaced btn-outline-borderless btn-sm lfr-portal-tooltip wp-icon"
   href="#link"
   title="title"
/>

[jogHar]

Thank @pat270, This is working, so I close my issue,

The other way to make it work is to use your image as a background-image in CSS instead of using the img tag. Add your image in your theme to src/images/wp-icon.png and in _custom.scss:

.wp-icon {
  background-image: url(../images/wp-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
}

In your JSP:

<clay:link
   buttonStyle="outline-secondary"
   elementClasses="btn-monospaced btn-outline-borderless btn-sm lfr-portal-tooltip wp-icon"
   href="#link"
   title="title"
/>