Ways to decrease the width of a outlined material icon

Is there a way to adjust the appearance of this icon to make it appear thinner? I have tried using font-weight and stroke-width without success.

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
  font-size: 60px;
  font-weight:100;
  stroke-width: 0.1px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>

  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  
</body>

</html>

htmlcssmaterial-uiiconsgoogle-material-icons

Answer №1

Unfortunately, altering the font weight is not an option in this case. However, you can adjust the font size or decrease the icon size to see how it affects the appearance of the icon with a smaller border.

Answer №2

You have the option to utilize scale() OR scale(). (included two hyperlinks for your reference)

The scale() function can either increase or decrease the size of an element, based on the specified parameters for the width and height.

Syntax

The scale() function accepts one or two values that indicate the amount of scaling to be applied in each direction.

scale(sx)

scale(sx, sy)


.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
  font-size: 60px;
  font-weight:100;
}

.icons_scale{
  transform: scale(0.5); 
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>

  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons material-icons--outlined icons_scale">assignment</i>
  </section>
  
</body>

</html>

UPDATE:

In reality, the stroke-width property is utilized to adjust the thickness of a line, text, or outline within the SVG tag. In this scenario, adjusting the font size will resolve the issue.

Answer №3

It seems that the stroke width of material-icons cannot be altered, but there is an alternative solution using "material symbols" that allows for modification.

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

The appearance of a list item (<li>) changes when navigating to a different page within a master page

I encountered an issue where after logging in with a username and password, upon being redirected to the homepage, the login button reappears on all pages instead of remaining hidden until I logout. My goal is for the login button within the <ul> ele ...

c#htmlasp.netwebformsmaster-pages

How to incorporate material-ui tabs in nextjs framework?

I'm currently working on a project using material-ui, nextjs, and typescript. My main focus right now is getting the navbar to function properly within nextjs: import * as React from 'react'; import AppBar from '@material-ui/core/A ...

javascriptreactjsmaterial-uinext.js

The order of event handlers in jQuery

I am currently setting up event binding for a text element dynamically. Take a look at the following code snippet: <input type="text" id="myTxt" /> <script type="text/javascript"> function attachEvent1(element){ element.keyup(func ...

javascriptjqueryhtmlevents

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

javascripthtmlknockout.js

Dynamic Bootstrap User Authentication Form

Currently, I am in the process of constructing a login form for my web application and have opted to use Bootstrap for its styling. To ensure that the screen is responsive, I've integrated the following "Meta Tag" into the structure: <meta name="v ...

htmlcssresponsive-designbootstrap-4responsive

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

Tips for retaining filled data after an incomplete form submission

<html> <head><script type="text/javascript"> function pa(){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document. ...

javascripthtmlajax

When scrolling on an IOS mobile device, the .on(click) event is triggered for fixed position elements

Whenever I click on an li element or menu, a function is triggered that moves the nav container to the left by the width of the window. However, on my iPhone, after I click to slide the container off the screen, the event gets triggered repeatedly every ti ...

javascriptjqueryhtmlioscss

Enhance the overall appearance of select elements across all components using Material UI's

I'm attempting to change the border color of my outlined select elements using the code below, but it's not working as expected. It seems that the border style is being inherited from the fieldset element. I've experimented with using MuiOut ...

javascriptreactjsmaterial-ui

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Exploring "Additional resources" using Selenium and Python

I am looking to extract text from the "Further reading" section of a Wikipedia article. My current code can open Google, input a request (such as 'Bill Gates'), and then find the URL of the corresponding Wikipedia page. Now I need help parsing th ...

htmlpython-3.xseleniumparsingselenium-webdriver

What is the best way to click on the third div class "link" using Selenium when they all have the same div class?

While working with selenium and python, I encountered a scenario where all the HTML elements have the same class "links". There are seven links on the page, each sharing the same class and similar name. I am seeking guidance on how to interact with these w ...

htmlpython-3.xseleniumclick

What is a straightforward method to showcase prototype nodes in PHP?

It's like a different flavor of UI, function DisplayUI($elements) { } This function will display the specified elements with name, id, and type in a flexible manner. UPDATE Create an array and get HTML as output. Has anyone experimented with thi ...

phphtml

Consistent dimensions for columns in a table, automatically adjusting based on content

Can we ensure that all rows and columns maintain equal height, whether or not they contain an image? If you need a visual representation of this concept, refer to this example: [] [] [] ...

csscss-tables

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

I would like to display the export buttons outside of the table. While searching on stackoverflow, I came across an example that uses the Select options method. You can find the example here. If anyone knows how to achieve this, please modify it and shar ...

javascripthtmldatatables

How can I bring in a dynamic MaterialUI theme object from another file?

Could anyone provide guidance on the correct syntax for importing a dynamic theme object from a separate file? I am attempting to retrieve the system theme based on a media query and then dynamically set the theme. Everything works as expected when all t ...

javascriptreactjsmaterial-ui

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

javascriptcsstypescriptweb-componentnative-web-component

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

jquerycsshoverfade

Unable to use text-align property on Material UI Input Component; all other functionalities are functioning correctly

I noticed that when inspecting the code, it appears that all the input styles I've defined are actually applying to the outer div created by Material UI that wraps the Input. However, other styles seem to be working fine, so I'm a bit confused ab ...

reactjsmaterial-ui