Changing the Width of a Material Icon

I'm currently working with Angular and Angular Material, and I have a md-button that includes both an icon and text. You can view it here:

http://jsfiddle.net/u7fp5wxv

Here is the code snippet for reference:

<md-button layout="row" style="width:80px;" layout-align="center center" ng-href="">
  <div class="material-icons" style="font-size: 36px;">keyboard_arrow_left</div>
  <div translate>Back</div>
</md-button>

The current width of the icon is set to 36px, but I would like to make it smaller, around 24px. However, just adjusting the width of the 

<div class="material-icons">
element does not reduce the size properly due to the padding around the icon.

Does anyone know how to resize the icon to 24px and ensure that it remains centered within those 24px?

cssangularjsangular-material

Answer №1

To adjust the size of the icon, simply manipulate the font-size property assigned to it. If you'd like to shift it to the right, consider adding a negative value to the margin.

.material-icons {
    margin-right: -10px;
}

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

Transitioning from a spinning Font Awesome icon to a static one: Tips and tricks

I'm looking for a solution to smoothly remove the fa-spin class from an element once a process is finished. The issue I'm facing is that there is no smooth transition between the icon spinning and stopping. setTimeout(function() { stopSpinn ...

csscss-transitionsfont-awesome

Start up Angular with a Fire $http.get when the page loads

I am facing an issue where my $http.get() request is firing after the home page has already loaded. How can I ensure that the request fires before the page loads so I can utilize the returned data on the page? Here is a snippet of the routing code: var l ...

javascriptangularjs

Is it not possible to collapse in webkit?

Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...

csscross-browser

Configuring ngTrueValue and ngFalseValue with numeric values

Update: This question is no longer relevant for the latest version of Angular. Refer to tsh's comment on this post for more information. In my code, I've connected a checkbox to a specific value: <input type="checkbox" ng-model="checkbox" ng ...

angularjscheckboxangular-ngmodel

Unable to adjust the height of the border when hovering over a P tag

Why doesn't the P tag text and border height increase work when it is hovered over by a mouse? What could be causing this issue? Here is the HTML code snippet: <body> <div class="cheap"> <p id= "pen">hello hannan .hello ...

htmlcss

How to reference a variable using a string in AngularJS

I am trying to update the state of a variable by accessing it. function changeValue(source, target, unit) { $scope[target] = process($scope[source] + unit + ".").toKilograms(); }); This function is triggered every time something is inputted i ...

javascriptangularjsangularjs-scopeeval

Why does the sticky navbar not display anything on localhost:4200 in Angular, but works perfectly when placed in a regular HTML file?

I'm encountering an issue while trying to create a webpage in Angular 6. The content displays correctly when I write the code in NOTEPAD as normal HTML, but it doesn't work as expected when implemented in Angular. I am new to Angular and struggli ...

htmlcssangularbootstrap-4navbar

Challenges with managing controllers within Directives

Currently, I am in the process of updating some code within a personal project that utilizes Angular to adhere to best practices. I have come across suggestions that the future direction of Angular involves incorporating a significant amount of functionali ...

javascriptangularjsangularjs-directiveangularjs-scopeisolate-scope

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

htmlcssfirefoxgoogle-chrome

Tips for positioning the overlay to match the icon list when hovering- JavaScript/Cascading Style Sheets (CSS)

My challenge involves a list of <li>'s accompanied by an icon that, when hovered over, displays an overlay containing information about the 'test'. The setup looks something like this: test1 test2 test3 and so forth.... Here' ...

javascriptjqueryhtmlcss

Adding Rows Dynamically to Material Data Table in Angular 7

Is there a way to dynamically add data from a service into my table? I am receiving data from AuthenticationService dialog and attempted using this.dataSource.push(this.transaction);, but it did not work as expected. This is the code snippet where I trie ...

angularservicedatatableangular-material

Having trouble getting this JavaScript query to function properly

The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The ...

javascriptjqueryhtmlcss

The breadth of the container

I am facing challenges in determining the setup of the content width with a fixed side panel. I want the side panel to maintain a set width regardless of the screen size, while the rest of the window accommodates the navbar, content, and footer. I have bee ...

htmlcssbootstrap-4flexbox

Styling Process Steps in CSS

Just starting out with CSS! I'm looking to replicate the Process Step design shown in the image. https://i.stack.imgur.com/Cq0jY.png Here's the code I've experimented with so far: .inline-div{ padding: 1rem; border: 0.04rem gray ...

javascripthtmlcss

Insert some padding above and below every line of text that is centered

I am looking to achieve a specific layout for my website. https://i.stack.imgur.com/dKT52.jpg Here is what I have attempted: <h2>Make search awesome using Open Source</h2> .banner .section_title h2 { font-family: "Oswald", Arial, sans- ...

htmlcss

An error-free blank page in Three.JS with a CSS3DRenderer

After implementing the CSS3DRenderer in my code, I am encountering a blank page without any errors. My main focus is to draw a line using the CSS3DRenderer as the rest of my code relies on its functionality. Here is the HTML code snippet: <!DOCTYPE htm ...

javascripthtmlcssthree.js

Ways to assign a dynamic background image to a div if and only if an image exists in the database

I have been working on implementing dynamic background images for multiple divs in index.html.erb. Currently, I have achieved this by using inline styling with the background URL fetched from my database (using carrierwave). The code snippet looks somethin ...

htmlcssruby-on-rails

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss

Manipulating SVG filter attributes with CSS: A comprehensive guide

In my quest to master CSS animation, I found myself needing to manipulate the values of SVG filter attributes. While attempting to reference a CSS variable within the specularConstant attribute, I encountered an error from the browser. Is it feasible to ...

csscss-animationssvg-filterscss-variables

Numerous lists conveniently consolidated within a single navigation bar

I am currently exploring the functionality of StumbleUpon's navigation bar by attempting to replicate it. My approach involves using 3 lists within 1, structured like this: <nav role="navigation"> <ul id="rightnav"> & ...

htmlcssnavigation