Bringing in particular material symbols

I have developed a web application that incorporates Google's Material Icons into its design. The majority of the icons I utilize are from the default 'filled' style, with only one being from the 'outlined' style. To bring these icons into my project, I use the following CSS code:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');

This import statement brings in two .woff font files - one for the regular 'Material Icons' font-family and one specifically for the 'Material Icons Outlined' family.

Since I am only using one icon from the outlined set, I'm wondering if there is a method to import just that individual icon without bringing in the entire collection (without having to save it locally)?

Any assistance on this matter would be greatly appreciated!

htmlcssmaterial-designmaterial-uigoogle-material-icons

Answer №1

If you want to use the 'filled' font only, simply remove |Material+Icons+Outlined| from the url.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Unfortunately, there is no official CDN that allows you to directly access a single image online. You would have to download the png or svg file from the icon library and host it yourself.

Keep in mind that each font file is relatively small, around 60KB-80KB (you can check out the links below). So, if your goal is to improve load time, removing one version of the font may not result in a significant difference.

filled woff2 outline woff2.

Answer №2

Encountered a similar issue, and decided to take matters into my own hands by hosting the icon on my own server.

Instead of incorporating a custom font-face, I opted to download the icon, modify the fill="black" parameter inside the SVG to match my desired color, and then simply utilized it within an img tag like so: 

<img src="assets/delete-icon.svg">
.

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

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Currently, I am working on developing my own blog website using Next.js and MD transcriptions. The issue I am facing involves anchor links. All the titles <h1> are being converted into anchor links through the use of the next Link component: <Link ...

javascripthtmlreactjsnext.js

Ways to eliminate space between column arrangement in Bootstrap

I've designed 3 cards containing 2 widgets each in the sidebar. To ensure responsiveness, I utilized bootstrap 4 column ordering. One problem is when the right column is larger than the left one in a row of 2 columns, there's an awkward space be ...

javascripthtmlcsstwitter-bootstrap

Using maxDate in Material UI DatePicker Component to set a maximum date limit

I'm having a tough time getting the maxDate property to function properly on the Material UI DatePicker component. It should disable dates after the specified maxDate. In my situation, I needed to set the maxDate to +60 days from the current Date(), ...

javascriptreactjsmaterial-ui

Attempting to customize the appearance of a submit button independently from other input elements

Hey there, I have a question that might sound silly, but bear with me as I'm still learning CSS. I've been experimenting with CakePHP and its form helper to create a form. Here's a snippet of the code I'm working with: <p><?ph ...

phphtmlcsscakephp

How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

After selecting an option, I am facing an issue where I cannot capture the ng-click event when a user chooses a value from the drop-down menu. This is because the select option has been altered by bootstrap-select, as the default select option does not sup ...

jquerycssangularjsbootstrap-select

Arrange an HTML div element within the confines of a mobile phone graphic

I'm currently working on implementing a unique slideshow that will be embedded within an image of a smartphone on my website. I have found that using Owl Carousel makes creating the slideshow itself quite easy, but now I am faced with the challenge of ...

javascriptjqueryhtmlcss

How can we ensure that multiple forms are validated when submitting one form in AngularJS?

Is there a way to validate two forms on the same page (address1 and address2) using AngularJS when the button on one of the forms is clicked? ` ...

javascripthtmlangularjsforms

Using JQUERY to handle event bubbling in the DOM after an AJAX call

I have been attempting to dynamically append content to a specific div using .ajax() and then utilize the new content within a jQuery Dialog. I believe that my usage of .on() is correct, but it appears that the DOM is not being properly updated. Here is t ...

javascriptjqueryhtmljquery-uidom

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

I am struggling to show the label text and checkbox value from a checkbox array whenever each one is clicked (for testing purposes, assume I want it to appear in an alert). My HTML looks like this: <label class="checkbox"> <input type="checkbox" ...

javascriptjqueryhtml

Angular: Radio button groups are not responding correctly when populated within a loop using ng-repeat

My goal is to populate multiple sets of radio buttons in a loop by combining the group name and index to ensure each set is uniquely grouped. However, I am facing an issue where only the last group in the loop has a checked radio button, while all other gr ...

javascripthtmlangularjsradio-buttonangularjs-ng-repeat

When Buttons Decide to Take a Break: A Guide to What Happens After You Click Them

Looking for some assistance with my code! I have a set of two buttons and when the user clicks on either one, it triggers a function (which is working perfectly). However, if the user clicks again on the same button, I want it to do nothing. Here is my HT ...

javascriptjqueryhtml

JavaScript encounters an Access Denied error when attempting to read data from a JSON file in

My code is experiencing issues on IE browser and Chrome, but works perfectly on FireFox. var currentPage = 1; var max = 0; var myList = []; var links = []; $.ajax({ cache: false, type : 'GET', crossDomain: true, ...

javascripthtmljsonajaxinternet-explorer

Implementing color to text in React JS

Is it possible to change the color of text using inline styles within the HTML tag itself? If so, how can I achieve this? <div id="root"></div><br> <script src="https://unpkg.com/react@16/umd/react.development.js"></script>& ...

javascripthtmlreactjs

Comparing CSS Variables to CSS Modules' @value functionality

Could you clarify the difference between the css function var(--red) and @value red from css modules for me? CSS Modules Example: @value red from "./color.m.css"; .background { background-color: red; } CSS Var() Example: @import "./color.m.css"; ...

cssmodulecss-variables

Customize your MUI Select to show the selected value in a different way within the Input field

I have a collection of objects and I am looking to link multiple attributes of the object in MenuItem, but I only want one attribute to be displayed in Select https://i.sstatic.net/kDKLr.png The image above displays "10-xyz" in the select display, when i ...

javascripthtmlreactjsmaterial-ui

This basic Javascript script is not functioning properly at the moment

I have encountered an issue with a basic javascript code that I wrote. Although it is a simple code, I am unable to identify any errors. Please review and let me know if you spot any mistakes. <div> <p onclick="closePopup()" id="adve">Someth ...

javascripthtml

Showing objects based on the proportions of the container

I am currently working on a component that will be utilized in numerous widgets within our web application. Is there any method to adjust the visibility of elements based on the size of a div? <div class="container" style="width:100%"> <div> ...

cssangularjshtmldom

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

javascriptphphtmlgoogle-signin

When the tailwind utilities are implemented, they do not appear on the screen

Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I migh ...

cssnext.jstailwind-css

Exploring the utility of the load_file function in the simple HTML DOM method

After writing this code and it was functioning properly. <?php include ('require/simplehtmldom_1_5/simple_html_dom.php'); echo $html=file_get_html('http://www.site.com'); ?> Now I want to make it work using the object method. He ...

phphtmldom