Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Keenicons not working on my angular Project


for the Bootstrap Icons is working fine , but for keeicons not working in html nothing apear just i put this into html for example :

<i class="ki-outline ki-graph-up text-primary"></i>


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi Haykel, I have the same problem and just stumbled on your post.

In the keenicons style.css, the classes call the keenicons like this


.ki-message-question .path1:before {
content: "\ed27";
opacity: 0.3;
}

so you need to do something like this to invoke the icon

<i class="ki-outline ki-graph-up text-primary"><span class="path1"></span></i>

this doesn't make any sense to me either


Hi Haykel,

Could you please try using the latest version of Metronic Angular (v8.1.9) instead of v8.1.8? The issue with Keenicons not working should be resolved in the latest version. We have tested adding the < i class="ki-outline ki-graph-up text-primary">< /i> icon in an Angular project, and it is displaying as expected.

Please update your project to the latest version and let us know if the issue persists. If you encounter any further difficulties, please provide more details or error messages, and we'll be happy to assist you.

Thanks


Hi,

May I know, are you working on Metronic Angular or your own existing Angular project with Metronic?

Thanks



on Metronic Angular Project v 8.1.8


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(