Tips for eliminating dots from material icons CSS

Recently, I incorporated a stylesheet from Google's Material Icons into my web project. However, upon implementing the HTML code provided to display the icon, I encountered an unexpected issue - a dot appeared beside the icon, which I do not want to be displayed.

Below is the reference to the stylesheet:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

Shown below is the code including the icon within a list:

<ul style="POSITION: absolute; TOP:7%; LEFT: 90%; Color:Red">

    <li>

        <!-- Icon's HTML code -->
        <i class="material-icons">account_balance</i>

    </li>


</ul>

My assumption is that a boolean property like dot:true/false might be the solution to this issue, but I can't seem to locate it. The problem might be related to my absolute positioning, although I am uncertain.

View the unexpected image here.

The dot unexpectedly appears on the left side, visible and uncovered, when my preference is for it to be concealed.

htmlcssicons

Answer №1

Here is an example of how to style an unordered list in CSS:

ul {
  list-style: none;
  /* Alternatively, you can use --list-style-type: none;-- */
}

If you want to include a Material Icon in your unordered list, you can do so by linking to the Material Icons stylesheet and then adding the icon within your list item like this:

ul {
  list-style: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul style="POSITION: absolute; TOP:7%; LEFT: 90%; Color:Red">
  <li>
  <!-- This is when I call the icon -->
  <i class="material-icons">account_balance</i></li>
</ul>

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

Using jQuery to retrieve child elements and assign numerical values to them

Looking for a jQuery function that can apply different CSS attributes to children elements of a div. <div class="container"> <div class="autogenerated-div"></div> <div class="autogenerated-div"></div> <div class="aut ...

javascriptjqueryhtmlcsschildren

Retrieve the following element by using the absolute xpath

I am currently working on my dashboard and there is a specific value that I need to retrieve. After some trial and error, I managed to use the following code https://i.sstatic.net/2lnzk.png Here is the code snippet used to obtain the xpath: driver.find_e ...

pythonhtmlselenium

Setting the height of a parent element in AngularJS when using ng-repeat

I'm dealing with a ng-repeat that has varying heights. When I set a fixed height, everything looks fine. However, I need the parent panel's height to adjust automatically based on the ng-repeat child elements to avoid overflow issues. Is there a ...

htmlcssangularjs

Content and visual side by side

My logo and header image are giving me trouble. Whenever I attempt to center the header image, it keeps moving to the next row. How can I make sure it stays on the same row? Check out our website Thank you ...

htmlcssimagetextalignment

Display the latest tooltip in a Tree view

I have developed a unique custom component to incorporate tooltips for each individual node within a Tree. function StyledTreeItem(props) { const { nodeId, labelText, tooltipTitle, ...other } = props; return ( <Tooltip title={tooltipTitle} placem ...

cssreactjsmaterial-ui

How can I use XPATH and Python Selenium to select the text node that is outside of an <a> element?

Check out the following link: Within this section of code: //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td, there is a piece of text Mottled Boar slain (10) //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td/a This part contains only: Mo ...

pythonhtmlpython-3.xseleniumxpath

Unable to delete borders within the container

Is there a way to eliminate the borders within this container? Visit this link for reference. I've tried using firebug but I can't seem to locate it... Appreciate any assistance you can provide. Thank you! ...

csswordpressborder

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

I am currently working on an exercise that involves creating four different files: index.html, home.html, about.html, and contact.html. The objective is to utilize jQuery's .load function to load the other three HTML files within index.html while stil ...

htmljquery

Utilization of CSS with the symbols of greater than and asterisk

I've been experimenting with Sequence.js and finding it really impressive. There's one line of code that I'm having trouble understanding: #sequence .seq-canvas > * {...} I discovered that the > symbol selects only direct descendant ...

csscss-selectors

Designing an uncomplicated password authentication system without embedding the password itself [Using PHP, Javascript, and MySQL]

I'm in the process of setting up a basic login prompt for my local website. I initially experimented with Javascript, but I'm looking for a way to avoid hardcoding the password. Users receive their passwords via email, so there's no need for ...

javascriptphphtmlmysqlauthentication

Ensuring the validity of a signed cookie in Node using Express

I'm currently working on incorporating signed cookies in Node's express module. I've reviewed the documentation, but I'm struggling to understand how to properly verify them. My understanding is that verification must occur on the serve ...

javascripthtmlnode.jscookiesexpress

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

javascripthtml

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays

Creating a dynamic website with user-friendly editing capabilities

Having a good understanding of html5 and css3, I am currently exploring ways to create a website that enables visitors to edit content in real time for all other users to see. While aware of the contenteditable attribute, I have found that it does not reta ...

javascriptphpjqueryhtmlcss

Add a background color to a drop-down selection box on Mozilla

I am trying to add a background color to a select box. My code successfully adds the background color to the options in Chrome, but not in Mozilla. How can I apply the background color to the select box in Mozilla as well? https://i.sstatic.net/TYU6R.png ...

htmlcss

Is there a way for me to prioritize the sidebar over the main content on the page

My theme is efficient and visually appealing, but there's one issue with the mobile layout - it displays the sidebar after the content. How can I rearrange this in my theme so that the sidebar appears before the content? Thanks for your help! ...

csswordpresssidebar

Updating a data table using POST values in ASP.NET: A step-by-step guide

I am working on updating values in my database and want to ensure that my script is functioning correctly. In order to check, I created a POST method to send the values and confirm they are being received. https://i.sstatic.net/h0IH5.gif Now, my question ...

javascripthtmljqueryasp.netasp.net-mvc

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Having trouble calling a function and receiving an error message. How can I resolve this issue? The error message reads: index.html?email=&gebruikersnaam=&wachtwoord=&submit=Submit:1 Uncaught ReferenceError: formValidation is not defined at HT ...

javascripthtmlfunction

How can you modify the color of a FontAwesome icon?

I am currently utilizing BigCommerce and my code looks like this: .icon-cart { color: #4ca3c0 !important; } .icon-cart a{ color: #4ca3c0 !important; } Despite the above, it seems that the icon's color remains unchanged. Any suggestions or i ...

htmlcssbigcommerce

Dynamic Cell Class Assignment in Ag Grid

My Div's dimensions can change based on user interaction, with the div containing an ag-grid component. Initially, the div/grid loads in a compressed size, so I've applied specific classes (like small font-size, height, padding, etc.) to eliminat ...

htmlcssangularag-gridag-grid-ng2