Aligning Font Awesome icons inside md-buttonsFinding the perfect alignment for

I am attempting to center font awesome icons within a button so that they align perfectly with the text on a toolbar. Below is the code snippet I am working with:

<div ng-app="app">
  <md-toolbar>
      <div class="md-toolbar-tools" md-tall"">
        <h2>
          <span>Icons</span>
        </h2>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa"></md-icon>
        </md-button>
        <md-button class="md-icon-button">
          <md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>
        </md-button>
    </div>
  </md-toolbar>
</div>

This results in the following layout:

https://i.sstatic.net/kMvqJ.png

Even though the fa-lg on the second icon appears centered, it may actually be aligned to the top. I have attempted adding layout-alignment="center center" to the md-button, but to no avail.

How can I adjust the alignment of font awesome icons inside md-buttons and more specifically, how can I vertically center them within the toolbar? Is there an Angular Material method for achieving this alignment, or do I need to use custom CSS?

CodePen

javascriptcssangularjsfont-awesomeangular-material

Answer №1

The issue seems to stem from the 24px fixed height set on the md-icon element, causing a misalignment of the icon vertically. As FontAwesome icons are designed with flexible heights, the forced fixed height disrupts the alignment; the center of the element no longer aligns with the icon. To resolve this, try overriding the fixed height with height: auto; as shown below:

md-icon {
  height: auto;
}

Answer №2

The problem is being caused by the additional height on md-icon

md-icon {    
    height: 24px;    
}

To resolve this issue, you can add an additional class like so:

<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>

and then override the height with the following code:

.fa-md {
    height: auto;
}

Answer №3

Check out this CSS snippet

.custom-icon .fa-square {
  font-size: 20px;
  height: auto;
}

Answer №4

After reviewing the most recent version of Angular Material (1.1.1), I'm pleased to report that the issue has been resolved. Happy coding!

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

AngularJS directive to scroll an image to the top of the sidebar

I am facing an issue in my AngularJS project where I need to scroll the active image to the top. However, when I tried using the element[0].offset() method, it threw an error. Let me explain the situation: In my code, I have hardcoded the active element ...

angularjsscrolldirective

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

javascriptreactjsfrontend

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

javascriptphpcsswordpressplugins

Unable to simultaneously execute TypeScript and nodemon

Currently, I am in the process of developing a RESTful API using Node.js, Express, and TypeScript. To facilitate this, I have already installed all the necessary dependencies, including nodemon. In my TypeScript configuration file, I made a modification to ...

javascriptnode.jstypescriptexpress

I'm curious about the meaning of "!" in pseudo-code. I understand that it represents factorial, but I'm unsure of how to properly interpret it

Can someone explain the meaning of ! in pseudo-code to me? I understand that it represents factorial, but for some reason I am having trouble translating it. For example: I came across this code snippet: if (operation!= ’B’ OR operation != ’D’ O ...

javascriptoperatorspseudocode

Dynamically Insert a Row into a Table using Bootstrap and JavaScript

Can someone provide assistance with my code? Specifically, I am looking to add the index number whenever a user clicks the add button and would like to know how to insert text input similar to the first row. I am currently in the process of learning JavaSc ...

javascriptlaravellaravel-8bootstrap-5

Using AJAX in a loop presents a challenge: What is the best way to initiate an ajax request for every item in an array?

Hey there! I'm a new member of the StackOverflow community and I could really use some assistance. My current challenge involves performing an inverse geocode to retrieve addresses from coordinates. I have a functional URL that works with ajax, but I ...

javascriptjqueryajax

transfer scope variable to scope function

I notice this pattern frequently view: <input ng-model="vm.model"> <button ng-click="vm.method(vm.model)"></button> controller: function Controller() { var vm = this; this.method = function(parameter) { // perform acti ...

javascriptangularjs

alignment of text output and label that responds to various screensizes

Here is some html code with a label and an output next to it. <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Company Name : </label><span class="head9 halfR"> ...

htmlcsstwitter-bootstrapalignmentmultiple-columns

Displaying a loading spinner while waiting for the Vue.js app to render

Currently, I am developing a Vue.js application and I'm facing a challenge in adding a loading spinner before the app component is rendered. Instagram has a similar feature where they display their logo before showing the page contents. I have tried v ...

javascriptvue.jslazy-loadingloading

Is there a way for my app to ask for Facebook permissions when the like button is clicked?

My website has Facebook integration, with Like buttons on the homepage that are popular and a login button that is not. I want to make the Like buttons also function as login buttons by requesting extended permissions for my app when they are clicked. I h ...

javascriptfacebookauthenticationpopup

Set up a single array containing multiple objects in a table, each with its own unique set of keys

I am currently developing an application that retrieves data from one or multiple databases, each with different names and varying numbers of columns. The goal is to consolidate this data into a single report screen and export it as a table. While the tabl ...

javascriptreactjsarraysjsonjavascript-objects

Exploring the functionality of Google Drive API with JPlayer

I'm currently exploring the possibilities of creating an app that can play music from Google Drive using Jplayer. I have successfully installed Jplayer on index.jsp, but I am unsure of how to effectively interact with it or where in the code I need to ...

javascriptgoogle-drive-apijplayer

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

javascriptangularjsangularjs-scope

Can one determine whether an SCSS element is devoid of content?

Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...

csssassstyles

What is the best way to split an image in half without displaying it and avoiding any horizontal scrolling on the page?

https://i.sstatic.net/Kj99o.png https://i.sstatic.net/W1BQ8.png Trying to align the two images shown above, but facing issues with making it responsive. The SVG image exceeds the container boundaries, causing horizontal scrolling. The goal is to have the ...

htmlcssreactjs

How can I reverse the names displayed in ng-repeat when I click?

When utilizing the orderby filter in angularjs, I want to be able to sort the data only when the button is clicked. If the button is not clicked, the sorting order should not be displayed. <tr ng-repeat="tools in toolsfilter | orderBy:orderByField:reve ...

javascriptjqueryangularjs

The button is not being vertically centered when using the boostrap pull-right class

---------------------------------------------------------------- | Title | | Button | --> (using .pull-right) the button is not aligned vertically ------------------------------------------------------------- ...

csstwitter-bootstrap

Node is looking for a callback function, but instead received something that is undefined

When attempting to build a basic CRUD app in node js, an issue arises with the error message "Route.get() requires a callback function but got a [object Undefined]" specifically on the router.get("/:id", userController.getUser); line. Routes.js const expr ...

javascriptnode.jsexpressroutes

Sending arguments to browser.executeScript

How can I provide parameters to browser.executeScript static sortableDragAndDropByClassName(dragElementClassName: string, dropElementClassName: string) { return browser.executeScript(function () { console.log(dragElementClassName); conso ...

javascriptangulartypesprotractor