Having trouble with Primeicons not displaying correctly in the tree component

Take a look at my code: https://github.com/d1rtyW0lf/aqp-regroupement

Here are the styles I'm using: 

"styles": [
     "node_modules/primeicons/primeicons.css",
     "node_modules/primeng/resources/primeng.min.css",
     "node_modules/primeng/resources/themes/omega/theme.css",
     "node_modules/font-awesome/css/font-awesome.min.css"
],

Check out the loaded result below:

https://i.sstatic.net/LTVAL.png

I'd like it to be displayed like this:

https://i.sstatic.net/o6y0P.png

Does anyone know where I can find the names of each icon in PrimeIcons for testing purposes? And is Fontawesome still necessary nowadays? The documentation doesn't mention it, but many discussions on this topic seem to suggest otherwise.

cssangulartypescript

Answer №1

Please update the font name in the tree array.

this.files = [
  {
    label: 'Folder 1',
    collapsedIcon: 'pi pi-folder',
    expandedIcon: 'pi pi-folder-open',
...

Refer to the available icon list below.

https://www.primefaces.org/primeng/#/icons

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning an icon vertically with wrapped text using CSS

My task involves reformatting predefined HTML using CSS to achieve a different layout. The HTML is received as an error message from the server and is not editable. .server-errors ul { list-style: none; } .server-errors li:before { content: "D"; f ...

htmlcss

What sets apart extending and intersecting interfaces in TypeScript?

If we have the following type defined: interface Shape { color: string; } Now, let's explore two different methods to add extra properties to this type: Using Extension interface Square extends Shape { sideLength: number; } Using Intersection ...

typescripttypesintersectionextends

Utilize rxjs to effectively handle API data responses and efficiently manage the state of your application within Angular 10

I'm currently exploring the most efficient method for storing and updating data from an API, as well as sharing that data among sibling components. Here's my initial attempt: Storing the Observable export class MyExampleService { private data ...

angularrxjsangular-services

npm start is unable to locate any instances of Angular version 2

I attempted to follow the instructions provided in the Angular 2 quickstart guide. I must say, I encountered a dreadful error. Can anyone translate the following to English? I did execute npm install. However, using "npm run lite" does work. npm start & ...

node.jsangularnpm

Tips for displaying a section of an image similar to the style seen on the website 9gag.com

Is there a way to display only a portion of an image (in this case, to hide the watermark) similar to how it is done on 9gag.com? I attempted to use clip in CSS, but it requires the image to be positioned absolutely, which is not ideal for me. Are there a ...

javascripthtmlcssimage

Creating customized placeholders using CSS padding in HTML5

I came across this helpful post and attempted various methods to adjust the padding for my placeholder text, but unfortunately, it seems unwilling to cooperate. Below is the CSS code. (EDIT: This CSS was generated from SASS) #search { margin-top: 1px; ...

htmlgoogle-chromewebkitcss

Changing div height based on the height of another dynamic div

Looking to create a box that matches the height of the entire page, live height minus another dynamic div called #wrapping. I have code that offsets it instead of removing the height of the div... function adjustBoxHeight() { var viewPortHeight = $(wind ...

javascriptjquerycssjquery-ui

Seeking assistance with rearranging items using flexbox when transitioning between portrait and landscape mode

Check out the wireframe below to see how our page currently appears in landscape mode, along with the items it contains: View landscape wireframe here Below is the corresponding code for the landscape wireframe: <div class="wrapper"> &l ...

htmlcssflexbox

Customize the default classes for DataGrid in Material UI

Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolb ...

htmlcssreactjsmaterial-ui

On desktop browsers, the position is set to fixed, while on mobile devices such as Android and iOS, it is set

The other day, I encountered an unexpected problem with fixed positioning. After some searching, I came across a few articles on the topic (one of which is ) and it seems that there is no clear solution available. In short, I am looking to have a fixed na ...

jquerycss

The use of @font-face in CSS seems to be malfunctioning

I am having trouble changing the font in my CSS to what I want it to be. body{ background-color:#a8a7a7; color:#C50909; font-family: main, Calibri; text-align:center; } @font-face{ font-family: main; src: url('fonts/RegencieLight.ttf'); } ...

htmlcssfont-face

Tips for updating TypeScript aliases during compilation

To define a typescript alias in tsconfig.json, you can use the following syntax: "paths": { "@net/*":["net/*"], "@auth/*":["auth/*"], }, After defining the alias, you can then use it in you ...

typescript

Is there a way to identify whether the image file is present in my specific situation?

I have a collection of images laid out as shown below image1.png image2.png image3.png image4.png … … image20.png secondImg1.png secondImg2.png secondImg3.png secondImg4.png secondImg5.png ……. …….. secondImg18.png My goal is to dynamically ...

javascriptjqueryhtmlcss

The brightness levels of the video appear to be slightly elevated in Safari and Chrome compared to that

My goal is to seamlessly blend a small part of a video with a larger static PNG background, ensuring that the edges of the video are indistinguishable from the background. However, I've encountered an issue where different browsers render the colors o ...

htmlcssgoogle-chromevideosafari

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

htmlcssbootstrap-5

What is the method for obtaining the number of weeks since the epoch? Is it possible to

Currently, I am setting up a DynamoDb store for weekly reporting. My idea is to use the week number since 1970 as a unique identifier for each report record, similar to epoch milliseconds. Here are some questions I have: How can I determine the current w ...

javascriptnode.jstypescriptdatetimetimezone

Updating the displayed data of an angular2-highcharts chart

I am facing an issue with rendering an empty chart initially and then updating it with data. The charts are rendered when the component is initialized and added through a list of chart options. Although the empty chart is successfully rendered, I am strugg ...

angulartypescripthighchartsangular-promise

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

cssreactjstypescriptmaterial-ui