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

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

htmlcss

Could someone please assist me in configuring Autocomplete (MUI) to display my options?

A friend of mine is experiencing difficulty with getting Autocomplete to display anything. Here's the code snippet in question: var names = []; const schoolList = async () => ( await axios.get("http://localhost:5000/api/grabUnivNames/") ...

reactjsmaterial-ui

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

javascripthtmlnode.js

TailwindCSS: Footer component overlaps central panel when scrolling on mobile devices

https://play.tailwindcss.com/notWWuhDpr?size=546x752 My project consists of three key components: The header A scrollable main panel The footer While it was relatively easy to implement this layout on the web using the code provided in the link above, I ...

csstailwind-css

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

Utilizing Webpack for Effortless Image Loading in Angular HTML

I've been struggling with webpack and angular configuration. It seems like a simple issue, but I just can't seem to find the solution. Despite scouring Stack Overflow for answers, I'm still stuck. My HTML page looks like this (along with ot ...

javascripthtmlangularjswebpack

Only send file input to the server when it is changed, and disregard any other inputs until the form is submitted

I am working with a form structured like this: <form method="post" action=""> <input type="text" onchange="uploadFile()" name="username"> <textarea name="description">< ...

htmlajaxformsinput

What is the best way to ensure that my grid item elements are all in a single line?

As a beginner in learning Material-ui, I encountered an error when using the Grid component. Here is the code snippet that caused the issue: My aim is to align the header buttons on the same line and have them appear with a scroll bar when zooming out. &l ...

reactjsmaterial-ui

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

javascripthtmliframedom-events

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

javascriptreactjsmaterial-uidatagrid

Looking for a more efficient approach to writing React styles for color?

Desire I am interested in customizing colors within Material UI components. Moreover, I aim to develop a React Component that allows for dynamic color switching through Props. Challenge The current approach using withStyles results in redundant and lengt ...

reactjstypescriptmaterial-ui

How can we reset multiple selected values (mui chips) in a React Material-UI Autocomplete field when changing the value in a different field?

Is there a way to clear the mui-chips in Material UI Autocomplete TextField when the value in another field is changed? I have been struggling with clearing the subtype value when the Type value changes. Although I can update the drop-down options based on ...

javascriptreactjsautocompletematerial-uimulti-select

When seen on a mobile device, the background image is set to repeat along the

Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...

htmlcssresponsive-design

Hide bootstrap card on smaller screens such as sm and md

Utilizing the Bootstrap 4.1 card component, I showcase categories within the right sidebar - check out a sample image of the card here: Card example image; When viewing on smaller screens, it's preferable to collapse this large card as shown in this ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss

Operating PHP program from html on Beaglebone Black Rev C Debian

I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...

javascriptphphtmlmysql

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

javascripthtml

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

javascriptjqueryhtmltwitter-bootstrap